webpack4版本升级webpack5
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了webpack4版本升级webpack5,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2938字,纯文字阅读大概需要5分钟。
内容图文
一、升级版本
- 升级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。
内容总结
以上是互联网集市为您收集整理的webpack4版本升级webpack5全部内容,希望文章能够帮你解决webpack4版本升级webpack5所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。