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

xyelidae
  • 59

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');
    }
}
回复
阅读 8.3k
3 个回答

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

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

这个时候,只需要设置

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

问题解决

user_Q5wyEGR9
  • 2
新手上路,请多包涵

我现在也是 cil4 打包 gzip 总是不成功 请问问题解决了吗

user_2jvWJ5zk
  • 2
新手上路,请多包涵

filename: "[file].gz[query]"

亲测可行!!!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏