webpack5升级笔记
分类:javascript
前言
webpack5主要更新可以看这里webpack5发布.
主要问题在webpack5更新文档中都可以找到相应的解决方案.这里主要记录webpack4升级到webpack5过程中一些插件升级遇到的问题.
webpack热更新失效问题
主要是webpack5对target配置做了更细致的划分,并且默认值为 "browserslist", 如果在package.json中配置了browserslist会发生冲突,所以在webpack5中的dev配置中要给target配置值web,使热更新生效.
配置多入口后,热更新后页面不生效问题
这里需要在dev配置中添加具体配置如下:
module.exports = {
...,
optimization: {
runtimeChunk: 'single'
},
...
}
主要原因可以看这里
webpack-merge调用方法更改
在最新版本的webpack-merge中的merge引用方法如下:
let{ merge } = require('webpack-merge')
旧版本直接引入即可
let merge = require('webpack-merge)
AddAssetHtmlWebpack 使用问题
在旧版本中,直接使用filepath就可以就文件自动添加到模板文件script中,在最新版本和webpack5中需要添加如下字段:
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, '../public/properties.js'),
includeRelatedFiles: false,
publicPath: '',
})
否则在模板文件script中文件路径会自动添加auto,主要问题可以在这里查看
loader插件引入方式更加严格
引入方法现在定义如下:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
// [style-loader](/loaders/style-loader)
{ loader: 'style-loader' },
// [css-loader](/loaders/css-loader)
{
loader: 'css-loader',
options: {
modules: true
}
},
// [sass-loader](/loaders/sass-loader)
{ loader: 'sass-loader' }
]
}
]
}
};
不再支持单独使用loader字段.
polyfills 支持
webpack5不再为 Node.js 模块 自动引用 Polyfills.如果引用的npm包引用了node模块,,需要手动引入,引入方法如下:
resolve: {
fallback: {
"crypto": require.resolve("crypto-browserify")
}
}