webpack4升级webpack5各种坑

背景

• webpack5出现也一年了，也该升级一下了
• 网上资料一通找，一堆升级教程，照着做，开始... 各种坑
• 开始勤劳的的填坑

开始

vue-loader问题

1. 注意 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(),
    ]
}
复制代码

2. webpack@5.x 与 vue-loader@16.x 版本 中间的一个报错问题，我单独写了一篇文章记录# DescriptionDataMatcherRulePlugin | webpack5 报错问题

3. 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'
                     
                ]
            }
        ]
    }
}

复制代码

4. webpack-merge

const { merge: webpackMerge } = require('webpack-merge');

复制代码

5. 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;
    }
})
复制代码

未完待续...