背景
- webpack5出现也一年了,也该升级一下了
- 网上资料一通找,一堆升级教程,照着做,开始... 各种坑
- 开始勤劳的的填坑
开始
vue-loader问题
- 注意
vue-loader
不同的版本是对应VUE不同版本的,这里一定要注意,如果你的VUE版本是2.x那么你要使用vue-loader@15.x
,如果是vue@3.x那么要使用vue-loader@16.x
// vue-loader@16.x
// 对应vue@3.x
const { VueLoaderPlugin } = require('vue-loader/dist/index');
module.exports = {
plugins: [
new VueLoaderPlugin(),
]
}
// vue-loader@15.x
// 对应vue@2.x
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
plugins: [
new VueLoaderPlugin(),
]
}
复制代码
-
webpack@5.x
与vue-loader@16.x
版本 中间的一个报错问题,我单独写了一篇文章记录# DescriptionDataMatcherRulePlugin | webpack5 报错问题 -
postcss-loader
问题
npm install --save-dev autoprefixer
// 新的配置
module.exports = {
module: {
rules: [
{
test: /\.(c|sa|sc)ss$/,
use: [
'vue-style-loader', // <style></style> 插入页面,development下使用
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
// "postcss-preset-env", // postcss-preset-env 包含autoprefixer (npm install postcss-preset-env --save-dev)
// "postcss-nested",
"autoprefixer", // css 加前缀
],
],
},
}
},
'sass-loader'
]
}
]
}
}
复制代码
webpack-merge
const { merge: webpackMerge } = require('webpack-merge');
复制代码
optimization
配置
production
module.exports = {
optimization: {
// 告知 webpack 当选择模块 id 时需要使用哪种算法
moduleIds: 'deterministic' // 被哈希转化成的小位数值模块名。
},
}
复制代码
6.webpack-manifest-plugin
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
new WebpackManifestPlugin({
publicPath: '',
filter: function (FileDescriptor) {
return FileDescriptor.isChunk;
}
})
复制代码
未完待续...