Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

VueCli打包时,使用 compression-webpack-plugin 进行压缩失败

1.我想打包后的代码可以支持gizp,所以我在 configureWebpack.plugins 添加了 CompressionWebpackPlugin
(以往我这么操作,都是可以成功的。我发现这个项目里,有设置chainWebpack
2.在生成环境下,提示 [Warning] Conflict: Multiple assets emit different content to the same filename js/.gz;
3.打包后,仅在 dist/jsdist/css 文件夹中生成一个名为 .gz 的文件;
4.我删掉 chainWebpack 后,可以正确打包出gz文件的。
5.我也尝试将 CompressionWebpackPlugin 放在 chainWebpack 中,但是没有用。需要怎么做才能正确打包出gz文件?(不删除现在的功能)

module.exports =?{
    configureWebpack: {
        plugins: [
            new webpack.ContextReplacementPlugin(/moment[/]locale$/, /zh-CN/),
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('.(' +?['js', 'css'].join('|')?+ ')$'),
                threshold: 10240,
                deleteOriginalAssets: false
            })
        ]
    },
    chainWebpack: config => {
        const svgRule = config.module.rule('svg');
        svgRule.uses.clear();
        svgRule
            .use('babel-loader')
            .loader('babel-loader')
            .end()
            .use('vue-svg-loader')
            .loader('vue-svg-loader');
    }
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

通过分析后发现:是 compression-webpack-plugin 插件升级了

"compression-webpack-plugin": "^6.0.0"

这个时候,只需要设置

filename: '[path][base].gz'

问题解决


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...