好文推荐
背景
没啥背景，就闲，改着玩儿
参考文档
版本对比
升级前：4.43.0
升级后：5.76.3
更新依赖
- 全局安装第三方检测包
npm install -g npm-check-updates
- 检测需要升级的包
ncu
- 写个node脚本做过滤处理
由于项目中依赖的包太多了，让其帮我们一次性升级不可取，但是自己一个一个搞也麻烦，所以将ncu的输出结果使用node脚本按行读取匹配做替换处理
1-将ncu的结果保存为txt文件
2-在package.json中新建脚本命令
"diff":"node ./diff.js"
3-在根目录新建对应的diff.js文件执行
const fs = require('fs');
const readline = require('readline')
const pkg = require('./package.json')
const rl = readline.createInterface({
input: fs.createReadStream('./update.txt'),
output: process.stdout,
terminal: false
});
rl.on('line', (line) => {
const arr = line.split(' ').filter(v=>v).filter(v=>v!=='→')
const [name,oldVersion,newVersion] = arr
for(let key in pkg){
if(key === 'dependencies' || key === 'devDependencies'){
for(let k in pkg[key]){
if(k.includes('webpack') && k === name && oldVersion === pkg[key][k]){
pkg[key][k] = newVersion
}
}
}
}
});
setTimeout(()=>{
fs.writeFileSync('./package.json',JSON.stringify(pkg),'utf-8')
},3000)
4-使用yarn重新安装
yarn
参考文档做语法替换
删除optimization.splitChunks的相关配置
image.png
- 删除output.name
image.png
- 替换.json文件的导入方式
image.png
- 修改node选项
image.png
1-修改前
image.png
2-将其替换如下
image.png
- 替换disableHostCheck:false为allowedHosts: 'all'
image.png
- 替换before为onBeforeSetupMiddleware
1-功能
与vue-devtools配合打开编辑器
2-文档
image.png
- 将publicPath转移到static下
image.png
- 将watchOptions的配置改为watchFiles
1-功能
监听文件自动刷新，4.x版本已经废弃了，watchFiles看着应是替代项
2-文档
image.png
- 删除overlay
1-功能
image.png
2-在pkg.json的启动script中传入--client-overlay替代
- 将contentBase替换为static.directory
image.png
- 将clientLogLevel替换为client.logging
image.png
- 修改copy-webpack-plugin语法为下
image.png
- 删除webpack.NamedModulesPlugin
image.png
- 删除webpack.HashedModuleIdsPlugin
image.png
- 删除cache-loader
image.png
运行报错修正
-- devtool
1-报错
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.
- configuration.node should be one of these
2-修改
原来
image.png
改为
image.png
- 添加nodeEnv
1-报错
不设置的话，会与DefinePlugin插件冲突
WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
2-文档
image.png
- Module not found
入口文件main.js此时会报一堆模块引入的错误，但是对于.js模块的引入则是正常的，故可能的问题是vue-loader版本或省略了.vue扩展导致，我这里是后者
- Can't resolve 'url'
1-安装三方补丁
yarn add node-polyfill-webpack-plugin
2-引入并作为plugin执行
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
plugins:[
new NodePolyfillPlugin()
]
- 图片无法正常显示
我这里是因为static下的publicPath和directory这两个属性的值有问题
构建速度前后比对
1-修改前
image.png
2-修改后
image.png
重要提示
缓存失效问题，一定要检查其build目录是否引入把一些易变文件作为了打包依赖
