Webpack5 升级小结

一、背景

本人项目模板使用create-react-app。本次升级目标是webpack5.11.0，已经是很新的版本了。目标，升级Webpack5，应用长效缓存，提升构建速度。

二、步骤

2.1、先按照官网升级文档，完成基本步骤。

如果你使用create-react-app,去这里：https://github.com/facebook/create-react-app/issues/9994

2.2 升级webpack5 npm 包至 5.11.0，升级所有的dev依赖到最新版本。如下为我的配置：

部分插件和loader由于公司内版本限制问题，无法升级。

"devDependencies": {
   
    "@babel/core": "7.12.10",
    "@babel/runtime": "7.12.5",
    "@svgr/webpack": "4.1.0",
    "add-asset-html-webpack-plugin": "3.1.3",
    "babel-eslint": "10.0.1",
    "babel-jest": "24.7.1",
    "babel-loader": "8.2.2",
    "babel-plugin-import": "1.13.3",
    "babel-plugin-named-asset-import": "0.3.2",
    "babel-polyfill": "6.26.0",
    "babel-preset-react-app": "8.0.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "cross-env": "7.0.2",
    "css-loader": "2.1.1",
    "dotenv"