借用 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
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'],
mini-csss-extract-plugin
替代 extract-text-webpack-plugin
webpack-cli
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
- 项目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 的格式,写入 JS
name: 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下面的css
flatten: false
}
])
// 新
new CopyWebpackPlugin({
patterns: [
{
from: 'temp', // 源路径
to: path.resolve(dirConfig.buildDir, './' + webDirName + '/temp/'), // 打包到build下面的css
context: 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
构建性能