webpack 高级应用

多入口

• 新建 other.html 和 other.js

• 修改 entry

• 修改 output

• 修改 HtmlWebpackPlugin

• 运行 dev

• 运行 build

抽离 & 压缩 css 文件

抽离

• 安装 npm i mini-css-extract-plugin -D
• 将之前 common 中的 css 处理，移动到 dev 配置中
• 配置 prod （配置 module ，配置 plugin）
• 运行 build

压缩

• 安装 npm i terser-webpack-plugin optimize-css-assets-webpack-plugin -D
• 配置 prod

抽离公共代码

• 配置 splitChunks
• 修改 HtmlWebpackPlugin 中的 chunks 。重要！！！
• 安装 lodash npm i lodash --save 做第三方模块的测试，引用 lodash
• 运行 build

懒加载

• 增加 dynamic-data.js 并动态引入
• 运行 dev 查看效果（看加载 js）
• 运行 build 看打包效果

至此，可以总结一下：

• module：就是js的模块化webpack支持commonJS、ES6等模块化规范，简单来说就是你通过import语句引入的代码。
• chunk: chunk是webpack根据功能拆分出来的，包含三种情况：
  • 你的项目入口（entry）
  • 通过import()动态引入的代码
  • 通过splitChunks拆分出来的代码
  • （chunk包含着module，可能是一对多也可能是一对一）
• bundle：bundle是webpack打包之后的各个文件，一般就是和chunk是一对一的关系，bundle就是对chunk进行编译压缩打包等处理之后的产出。

处理 React 和 vue

• vue-loader
• jsx 的编译，babel 已经支持，配置 @babel/preset-react

常见 loader 和 plugin

• https://www.webpackjs.com/loaders/
• https://www.webpackjs.com/plugins/