一、升级版本

• 升级webpack版本 cnpm install webpack@latest -D 升级后版本^5.35.1
• 升级webpack-cli版本 cnpm install webpack-cli@latest -D 升级后版本 ^4.6.0
• 升级webpack-dev-server cnpm install webpack-dev-server@latest -D 升级后版本 ^3.11.2
• 升级webpack-merge cnpm install webpack-merge@latest -D 升级后版本 ^5.7.3

二、问题

升级之后，可以执行通过执行node --trace-deprecation node_modules/webpack/bin/webpack.js这一句命令，可以查看具体有哪些报错。

---

Q1: 执行npm run dev，发现有报错 Error: Cannot find module 'webpack-cli/bin/config-yargs’
A1: 原来是之前package.json里面的 webpack-dev-server要改成webpack serve或者修改webpack-cli版本改为3.x

---

Q2: 继续执行npm run dev，报TypeError: merge is not a function
A2: 之前写了一个webpack.config.base.js是生产环境和开发环境都要是用的配置，使用了webpack-merge合并到webpack.development.config.js上，之前webpack.development.config.js写法是这样的

const merge = require('webpack-merge');
console.log(merge); // { merge: [ Function merge], ...};
const baseConfig = require('./webpack.config.base');
module.exports = merge(baseConfig, {...});

因此打印了一下merge发现最新版本的暴露的是一个对象，merge是里面的一个方法，因此现修改为const { merge } = require('webpack-merge') ;

---

Q3: 执行npm run dev，Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
configuration.devtool should match pattern “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”.
BREAKING CHANGE since webpack 5: The devtool option is more strict.
Please strictly follow the order of the keywords in the pattern.
A3: 根据提示应该是我们的devtool设置的不合理，之前的设置为devtool: '#eval-source-map',根据提示信息，应该是只能以inline-|hidden-|eval-开头，所以我们试着把#删除试一下，发现可行，果然是这样

---

Q4: 继续执行npm run dev，TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible
A3: 通过报错信息，具体不知道是什么地方引起的，只能查查资料，通过查阅发现是html-webpack-plugin的版本不对，之前是^3.2.0，需要升级到4.x版本，我升级到最新版本 ^5.3.1

---

Q5: 继续运行npm run dev，终于可以启动本地服务了，然后打开发现白屏，打开控制台一看报错了，vendor.js 404，路径是测试环境路径+vendor.js
A5: 可以看到是路径不对，因此我们可以猜测是publicPath不对，之前webpack4的时候这样写没问题，我打印了下argv.publicPath在webpack4|| webpack5都是undefined，具体原因我也不是很清楚，我尝试将publicPath: argv.publicPath || '...测试环境路径',修改为publicPath: '127.0.0.1:8092/' || '...测试环境路径',，发现最终生成的路径是http://127.0.0.1:8092/127.0.0.1:8092/vendor.js，因此又将其修改为publicPath: '/' || '...测试环境路径',，终于可以正常使用了

new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true,
            chunksSortMode: 'none',
            publicPath: argv.publicPath || '...测试环境路径',
            serverTag: 'mqa',
            chunks: ['vendors', 'main'],
            favicon: path.resolve('favicon.ico')
        }),

至此，webpack4升级到webpack5的算是完成了。接下来就是实验一下webpack5的新特性Module Federation。