webpack4-to-webpack5

好文推荐

localStorage的别样用法

背景

没啥背景，就闲，改着玩儿

参考文档

版本对比

升级前：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

参考文档做语法替换

• 资源模块的loader替换

• 删除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目录是否引入把一些易变文件作为了打包依赖