webpack 学习

• entry入口
• output出口
• loader
  • webpack自身只能理解JavaScript
  • loader可以将所有类型的文件转换为webpack能够处理的有效模块
  • 转换后进而可以构建依赖图
• plugin
  • 执行更广的任务
  • 打包、优化、压缩...重新定义环境中的变量
  • require->添加到plugin数组->options/new(不同目的多次使用同一个插件)
• 模式：model
  • 添加 mode: 'development'/'production'
• 拓展部分
  • webpack提供命令行接口（cli）
  • webpack各种命令
    • --help
      • 列出命令行所有配置命令
      • webpack --help / webpack -h
    • --config
      • 为webpack指定一个其它的配置文件（默认为 webpack.config.js ）
      • webpack --config anotherConfigFile.js
    • --progress
      • 在命令行控制台打印显示当前的打包进度
      • webpack --progress
    • --watch
      • 实时监测依赖表里面的文件的变化，会迅速更新打包后的文件，否则通过缓存获取
      • webpack --watch / webpack -w
    • --colors
      • 开启/关闭控制台的颜色
      • webpack --colors(webpack5.3 好像报错了) / webpack --color
    • --profile
      • 记录过程中编译的性能
      • webpack --profile
  • webpack-dev-server
    • 安装：npm i webpack-dev-server -g
    • 运行： webpack-dev-server(相当于 webpack )
    • 它将在 localhost:8080 启动一个 express 静态资源 web 服务器
    • 以监听模式自动运行 webpack
    • 在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/
    • 可以浏览项目中的页面和编译后的资源输出
    • 通过一个 socket.io 服务实时监听它们的变化并自动刷新页面
  • 通过package.json将常用命令制成脚本
    • package.json中的script字段指定运行脚本命令的npm 缩写
    • "scripts": { "w": "webpack --progress --colors --watch", "p": "webpack -p", "dev":"webpack-dev-server" }
      • 运行npm run w时，相当于运行webpack --progress --colors --watch，表示运行监视模式，使用彩色字符，并显示出打包的百分比过程
      • 运行npm run p时，相当于运行webpack -p，表示压缩模块文件
      • 运行npm run dev时，相当于运行webpack-dev-server，表示运行本地服务器