webpack4版本升级webpack5

2021-04-28 16:04:49 阅读：323 来源： 互联网

标签：webpack5 webpack4 版本升级 dev 升级 merge webpack publicPath 版本

一、升级版本

升级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。

标签：webpack5,webpack4,版本升级,dev,升级,merge,webpack,publicPath,版本
来源： https://blog.csdn.net/litCabbage/article/details/116201776

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack4版本升级webpack5

一、升级版本

二、问题