【构建工具】webpack 3、4 升级指南，摆脱低版本的困扰

一、依赖处理

1.升级通用依赖

借用 ncu 库实现，帮你改写需要升级的package.json 然后再 npm install

ncu -u  <packages> # 可以指定依赖
ncu # 升级全部依赖

大概列了下升级的效果

add-asset-html-webpack-plugin    ^2.1.3  →    ^5.0.2
clean-webpack-plugin            ^0.1.14  →    ^4.0.0
copy-webpack-plugin              ^4.0.1  →   ^11.0.0
css-loader                      ^0.28.7  →    ^6.7.3
es6-promise                      ^4.2.5  →    ^4.2.8
friendly-errors-webpack-plugin   ^1.6.1  →    ^1.7.0
html-webpack-plugin              ^2.2.0  →    ^5.5.0
sass-loader                      ^7.1.0  →   ^13.2.0
vue-loader                      ^13.3.0  →   ^17.0.1
webpack                          ^3.9.0  →   ^5.75.0
webpack-dev-server              ^2.10.0  →   ^4.11.1

2.升级babel依赖

babel 升级工具修改配置

npx babel-upgrade --write# 或是安裝 babel-upgrade 在 global 並執行
npm install babel-upgrade -g
babel-upgrade --write

可以看到 package.json 中移除了旧版本的依赖，自动新增了新版名称，.babelrc 文件的配置也会自动修改 但是不会删除已有的插件

移除旧版本依赖后重新安装依赖

rm -rf node_modules
npm install

修改所有 bable-polyfill 为 @babel/polyfill

因为 babel 7 新增的 @babel 命名空间，所以原来的 babel-polyfill 需要修改名称

// index.js 头部导入修改
import '@babel/polyfill'// webpack config 入口修改
entry: ['@babel/polyfill', './src/index.js'],

安装新依赖

1. mini-csss-extract-plugin 替代 extract-text-webpack-plugin
2. 添加webpack-cli
3. vue-loader 需在v15（包含）以下

废除项目中的旧包

// 大概的
url-loader
file-loader
vue-style-loader
extract-text-webpack-plugin
optimize-css-assets-webpack-plugin
clean-webpack-plugin
webpack-hashed-chunk-id-plugin

package.json启动命令修改

webpack-dev-server -> webpack serve

二、plugins及一些依赖使用方式的改变

• 项目webpack-dev-server升到了4版本用来配套webpack5，所以npm run dev的命令需要相改为webpack serve启动
• 需要再plugins里面增加VueLoaderPlugin（vue-loader）
• extract-text-webpack-plugin和optimize-css-assets-webpack-plugin已经过时了需要由mini-css-extract-plugin和css-minimizer-webpack-plugin来代替
• webpack5自带了资源解析，所以不需要什么url-loader,file-loader之类的，直接用assets就可以解析
• 调整copyWebpackPlugin（copy-webpack-plugin）使用方法
• clean-webpack-plugin 废除，是用webpack5自带的 clean 配置
• webpack-merge要解构出来，const { merge } = require(‘webpack-merge’)
• NamedModulesPlugin已过时，由optimization的moduleIds进行替换
• copy-webpack-plugin插件使用方式有变化
• devServer改动很多可以参考以上文章链接，自定义参考官网devserver专题
• UglifyJsPlugin已经过时，可以直接使用webpack5开箱提供的TerserPlugin
• 代码拆分webpack.optimize.CommonsChunkPlugin已经过时现在使用webpack5提供的optimization.splitChunks属性来实现功能来实现
• build->util.js文件中修改了一处 MiniCssExtractPlugin.loader。ExtractTextPlugin（extract-text-webpack-plugin）已过时，使用MiniCssExtractPlugin（mini-css-extract-plugin）进行替换。
• devtool有做一定修改
• 由于vue-loader升级了，所以之前css如果使用/deep/有可能出错。我是在根节点使用/deep/然后换到::v-deep就正常了。如果有类似问题，可以相应调整。
• 去掉了vue-style-loader使用style-loader替代。原因css-loader从V4版本开始默认开启esModule，导致css无法被vue-style-loader解析的问题
• thread-loader 可以支持替换 HappyPack 用法更简单（但是需要注意兼容性问题）

三、配置文件的更改

代码拆分 webpack.optimize.CommonsChunkPlugin 的替代 optimization.splitChunks

optimization: {// 用文件名的 hash 替换打包时候的 ModulesID , 保持 modulesID 不变利于前端持久化moduleIds: 'deterministic',// 抽取出 webpack 的 runtime 代码，避免稍微修改一下入口文件就会改动 commonChunk ，导致原本有效的浏览器缓存失效runtimeChunk: true,splitChunks: {chunks: 'all',cacheGroups: {// 用次数大于等于 2 的模块，单独打包default: {reuseExistingChunk: true,minChunks: 2,priority: -20,filename: webDirName + '/commons/default-[chunkhash:8].js'},// 将所有 node_modules 中的资源单独打包到 vendors-xxx-xx.js 命名的产物defaultVendors: {idHint: 'vendors',reuseExistingChunk: true,test: /[\\/]node_modules[\\/]/i,priority: -10,filename: webDirName + '/commons/defaultVendors-[chunkhash:8].js'}}}}

图片资源 url-loader file-loader 等的替换

// 旧 webpack
{test: /\.(png|svg|jpg|jpeg|gif)(\?.*)?$/i,include: dirConfig.srcDir,loader: 'url-loader',options: {limit: 1024,							// 把小于1kB的文件打成 Base64 的格式，写入 JSname: webDirName + '/images/[name].[hash:8].[ext]',	// 放在文件夹的路径及命名publicPath: '/',						// 路径上添加两个点指向正确路径,cacheDirectory: true}
}
// 新 webpack 5
{test: /\.(png|svg|jpg|jpeg|gif)(\?.*)?$/i,include: dirConfig.srcDir,type: 'asset',generator: {filename: webDirName + '/images/[name].[hash:8].[ext]' // 放在文件夹的路径及命名},parser: {dataUrlCondition: {maxSize: 1024 // 把小于1kB的文件打成 Base64 的格式，写入 JS}}
},

copy-webpack-plugin 用法改变

// 旧
new CopyWebpackPlugin([{from: dirConfig.srcDir + '/temp', // 打包的静态资源目录地址to: path.resolve(dirConfig.buildDir, './' + webDirName + '/temp/'), // 打包到build下面的cssflatten: false}
])// 新
new CopyWebpackPlugin({patterns: [{from: 'temp', // 源路径to: path.resolve(dirConfig.buildDir, './' + webDirName + '/temp/'), // 打包到build下面的csscontext: dirConfig.srcDir // 基础目录}]
})

extract-text-webpack-plugin 替换 mini-css-extract-plugin

// 旧
new ExtractTextPlugin(webDirName + '/css/[name]-[contenthash:8].css')
// 新
new MiniCssExtractPlugin({filename: webDirName + '/css/[name]-[contenthash:8].css' // 设置导出路径和文件名
})

html-webpack-plugin 添加 chunks

chunks: ['defaultVendors', 'default', 'commons']

添加 mode

mode: 'production' | 'development' | 'none'

eslint-loader 替换为 vscode 的 eslint 实时检查

eslint-loader 是一个 Webpack 插件，赋予其构建时检测代码的功能，但是会影响构建性能

推荐使用，编辑器的 eslint 插件，可以在编辑器中实时检查代码，给出错误和警告提示。这种方式可以帮助开发者在编写代码时及时发现问题，而不需要等待打包过程，不会影响 Webpack 构建性能