Webpack v4 升级到 v5 记录

好处

1. 开启 sideEffects，能真正启用 tree shaking，移除不在使用的代码，效果见附录一
2. 真正的内容 hash 文件名，确保长效缓存，不会因为引入顺序变化等生成不同文件
3. cache 新增，编译更快速
4. 等等其他一些优化（其实我也不知道还有什么了）

步骤

1. 安装最新的 webpack webpack-cli
2. 升级所有 webpack 的 Plugins 和 Loaders
3. 修改 webpack.dll.config.js
4. 更新 webpackDevServer.config.js

整个代码改动详见 pr-4

Package 依赖包的变更

升级 webpack 对应的 plugin、loader 等到最新版。

详见链接

Webpack 配置的变更

新增的配置

• cache add
• output.assetModuleFilename add
• output.library delete
• output.futureEmitAssets delete
• output.jsonpFunction delete
• output.globalObject delete
• module.rules[0].parser delete
• eslint-loader delete
• url-loader -> assets
• file-loader -> assets/resource
• node delete
• OptimizeCSSAssetsPlugin delete
• CssMinimizerPlugin add
• PnpWebpackPlugin delete
• ModuleScopePlugin update
• HotModuleReplacementPlugin delete
• WatchMissingNodeModulesPlugin delete
• WebpackManifestPlugin update
• IgnorePlugin update
• ESLintPlugin add

详见链接

Webpack dev server 配置的变更

新增的配置

• static
• setupMiddlewares
• devMiddleware

移除的配置

• writeToDisk
• disableHostCheck
• before(app)

详见链接

启动脚本 start.js 的变更

  const serverConfig = {
    ...createDevServerConfig(
      proxyConfig,
      urls.lanUrlForConfig,
    ),
    host: HOST,
    port,
  }
  // const devServer = new WebpackDevServer(compiler, serverConfig)
  const devServer = new WebpackDevServer(serverConfig, compiler)

  // devServer.listen(port, HOST, err => {})
  devServer.startCallback(() => {})

详见链接

参考文档

• https://webpack.js.org/migrate/5/#upgrade-webpack-to-5
• https://webpack.js.org/blog/2020-10-10-webpack-5-release/
• https://github.com/facebook/create-react-app/releases/tag/v5.0.0

附录一

// sideEffect 效果

// 以下为 webpack4 打包后的资源大小
File sizes after gzip:

  121.49 KB        build/static/js/common.d05d0b00.js
  100.56 KB        build/static/js/vendor.9ecccad1.js
  60.49 KB         build/static/css/order.7fc1215c.css
  55.52 KB         build/static/css/common.b0d314b9.css
  48.05 KB (-1 B)  build/static/js/order.f5fa0c3e.js
  14.28 KB         build/static/js/iconfontjs.a44f5d02.js

// 同样的页面在 webpack5 打包后的资源大小
File sizes after gzip:

  100.06 kB (-2.92 kB)  build/static/js/vendor.a0ae263b.js
  98.3 kB (-26.11 kB)   build/static/js/common.ef269b3b.js
  59.78 kB (-2.16 kB)   build/static/css/order.caefc24e.css
  56.81 kB (-43 B)      build/static/css/common.92c401c1.css
  29.2 kB (-20.01 kB)   build/static/js/order.cbc641bd.js
  19.17 kB              build/static/js/vendor_other.727b5c6a.js
  14.56 kB (-68 B)      build/static/js/iconfontjs.b7bc4526.js
  2.22 kB               build/static/css/vendor_other.e96e4e1f.css

// 同样的 common.js 在开启 sideEffects 后会减少 26K，从 BundleAnalyzerPlugin 看是移除了 `html2canvas` 等库

附录二

// 例子 order.js，改变 import 一个文件的顺序，分别打包：

...
import { beNum } from "../common/task_tools"
import { getTheme } from "../activity/group_buying/utils"
...

...
import { getTheme } from "../activity/group_buying/utils"
import { beNum } from "../common/task_tools"
...

// 结果如下:

// webpack4 下
order.6e9f9902.js -> order.f5fa0c3e.js

// webpack5 下
order.cbc641bd.js -> order.cbc641bd.js

webpack5-webpack4

注： 以上数据针对真实项目，非此 demo 代码