webpack 学习

• 2021 年 5 月 6 日
• 筆記
• 前端工程

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
    • 在浏览器打开 //localhost:8080/ 或 //localhost:8080/webpack-dev-server/
    • 可以浏览项目中的页面和编译后的资源输出
    • 通过一个 socket.io 服务实时监听它们的变化并自动刷新页面
  • 通过package.json将常用命令制成脚本
    • package.json中的script字段指定运行脚本命令的npm 缩写
    • “scripts”: {<br /> “w”: “webpack –progress –colors –watch”,<br /> “p”: “webpack -p”,<br /> “dev”:”webpack-dev-server”<br /> }<br />
      • 运行npm run w时，相当于运行webpack –progress –colors –watch，表示运行监视模式，使用彩色字符，并显示出打包的百分比过程
      • 运行npm run p时，相当于运行webpack -p，表示压缩模块文件
      • 运行npm run dev时，相当于运行webpack-dev-server，表示运行本地服务器