Webpack的升级
迁移指南
- 跟着迁移指南我们可以了解一些版本的差异，比如新增的功能点，废弃的配置项等。
- 接下来跟着我，开启真实的老项目重构之旅
升级步骤（以下升级均已开发配置为例）
-
升级之前一定要做好相关依赖文件的备份，这样在升级后，可以去官网找版本对应配置的变化
-
找到项目的package.json文件，搜索webpack相关的依赖
- 升级webpack相关的依赖
yarn add webpack webpack-cli
- 找到webpack配置项中的plugin和loader
- 根据配置文件中使用的plugin进行升级
yarn add html-webpack-plugin copy-webpack-plugin stylelint-webpack-plugin hard-source-webpack-plugin html-webpack-tags-plugin vue-loader -D
- 根据配置文件中使用的loader进行升级
yarn add babel-loader css-loader eslint-loader file-loader html-loader html-minifier-loader img-loader ngtemplate-loader postcss-loader raw-loader react-hot-loader sass-loader style-loader url-loader vue-loader -D
- 根据迁移指南升级废弃的配置项
- 找到自己的webpack配置文件，将需要升级的配置项根据提示进行修改
- 比如我的配置中并未有与以上内容相关的，因此没有修改
- 根据迁移指南提示清理配置（您可根据自己的情况结合迁移指南的提示来进行修改）
- 将node.fs: empty。修改为resolve.fallback.fs: false
- 将使用url-loader，raw-loader，file-loader的rules配置为asset module
- 设置optimization.splitChunks: { chunks: 'all' }，代替之前的chunks切分
- 全部升级，修改完毕后，可以尝试运行项目
- 此时很可能会遇到错误，根据错误提示进行修改即可
- 以下会列出我所遇到的所有错误，并给出解决方案，仅供参考
-
以问题和答案方式呈现
- 版本问题
答案
- 根据提示，webpack-cli未找到，则可能是版本不兼容，检查版本是否是最新
- 如果webpack-cli没问题，那就是webpack-dev-server版本不兼容，升级到最新（已解决）
- 配置问题
答案
- 根据提示是CopyPlugin的配置项不匹配，找到包的官网，使用最新配置来更改配置项
- 查看文档得知，最新的配置项有patterns，options，只需要将原来的配置项移至patterns内即可
- 配置问题
答案
- 根据提示是HardSourceWebpackPlugin调用出错
- 通过查看官方的issue得知，在webpack5中不需要这个插件，已经内置了cache功能，使用内置的cache配置即可
- 配置问题
答案
- 根据提示可知是dev server配置项不匹配，找到该模块的官网，使用最新配置来更改配置项
- 主要是将contentBase修改为static
- 配置问题
答案
- 根据提示可知是多个chunks生成了同名的bundle，因此在output配置项中，将chunkFilename设置为[id].js，这也是默认值
- 版本问题
答案
- 根据提示可知，主要是stylelint提示的语法错误，应该是webpack升级后，版本不兼容，可升级后再试
- 升级相关的所有版本到最新，出现新的错误
- 版本问题
答案
- 根据提示是eslint报的错误，升级相关的依赖项到最新版本
yarn add eslint babel-eslint eslint-config-angular eslint-loader eslint-plugin-angular eslint-plugin-import -D
- 版本问题
