Vue开启Gzip打包异常：webpack打包报错Cannot read property ‘emit‘ of undefined

亦凉 2023-02-24 11:22 2阅读 0赞

## Vue开启Gzip打包异常：webpack打包报错Cannot read property 'emit' of undefined ##

### 相关代码 ###

const CompressionPlugin = require('compression-webpack-plugin')

webpackConfig.plugins.push(

var path = require('path')
    var utils = require('./utils')
    var webpack = require('webpack')
    var config = require('../config')
    var merge = require('webpack-merge')
    var baseWebpackConfig = require('./webpack.base.conf')
    var CopyWebpackPlugin = require('copy-webpack-plugin')
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    var ExtractTextPlugin = require('extract-text-webpack-plugin')
    var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
    var CompressionWebpackPlugin = require('compression-webpack-plugin');
    
    var env = config.build.env;
    var productionGzipExtensions = [
        'js',
        'css',
        'html',
        'svg',
        'png',
        'less',
        'jpg',
        'jpeg',
        'woff',
        'ttf',
        'woff2',
        'ico',
    ];
    
    var webpackConfig = merge(baseWebpackConfig, {
        module: {
            rules: utils.styleLoaders({
                sourceMap: config.build.productionSourceMap,
                extract: true
            })
        },
        devtool: config.build.productionSourceMap ? '#source-map' : false,
        output: {
            path: config.build.assetsRoot,
            filename: utils.assetsPath('js/[name].[chunkhash].js'),
            chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
        },
        plugins: [
            // http://vuejs.github.io/vue-loader/en/workflow/production.html
            new webpack.DefinePlugin({
                'process.env': env
            }),
            // new CompressionWebpackPlugin({
            //     algorithm: 'gzip',
            //     test: productionGzipExtensions,
            //     threshold: 0,
            //     minRatio: 0.8,
            // }),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                },
                sourceMap: false
            }),
            // extract css into its own file
            new ExtractTextPlugin({
                filename: utils.assetsPath('css/[name].[contenthash].css')
            }),
            // Compress extracted CSS. We are using this plugin so that possible
            // duplicated CSS from different components can be deduped.
            new OptimizeCSSPlugin({
                cssProcessorOptions: {
                    safe: true
                }
            }),
            // generate dist index.html with correct asset hash for caching.
            // you can customize output by editing /index.html
            // see https://github.com/ampedandwired/html-webpack-plugin
            new HtmlWebpackPlugin({
                filename: config.build.index,
                template: 'index.html',
                inject: true,
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                        // more options:
                        // https://github.com/kangax/html-minifier#options-quick-reference
                },
                // necessary to consistently work with multiple chunks via CommonsChunkPlugin
                chunksSortMode: 'dependency'
            }),
            // keep module.id stable when vender modules does not change
            new webpack.HashedModuleIdsPlugin(),
            // split vendor js into its own file
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: function(module, count) {
                    // any required modules inside node_modules are extracted to vendor
                    return (
                        module.resource &&
                        /\.js$/.test(module.resource) &&
                        module.resource.indexOf(
                            path.join(__dirname, '../node_modules')
                        ) === 0
                    )
                }
            }),
            // extract webpack runtime and module manifest to its own file in order to
            // prevent vendor hash from being updated whenever app bundle is updated
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest',
                chunks: ['vendor']
            }),
            // copy custom static assets
            new CopyWebpackPlugin([{
                from: path.resolve(__dirname, '../static'),
                to: config.build.assetsSubDirectory,
                ignore: ['.*']
            }])
        ]
    })
    
    if (config.build.productionGzip) {
        var CompressionWebpackPlugin = require('compression-webpack-plugin')
    
        webpackConfig.plugins.push(
            new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' +
                    config.build.productionGzipExtensions.join('|') +
                    ')$'
                ),
                threshold: 1024,
                minRatio: 0.8
            })
        )
    }
    
    if (config.build.bundleAnalyzerReport) {
        var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
        webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }
    
    module.exports = webpackConfig

## ##

### 错误如下 ###

compiler.hooks.emit.tapAsync(\{ name: 'CompressionPlugin' \}, emit);

TypeError: Cannot read property 'emit' of undefined

at CompressionPlugin.apply (C:\MyWayProject\2018\vue\ehrAdmin\node_modules\compression-webpack-plugin\dist\index.js:175:20)

### 解决方案 ###

把compression-webpack-plugin降到1.1.12即可

//卸载原高版本compression-webpack-plugin
    npm uninstall --key compression-webpack-plugin
    //新安装低版本compression-webpack-plugin
    npm install --save-dev compression-webpack-plugin@1.1.12

*参考资料：[https://segmentfault.com/q/1010000016321028][https_segmentfault.com_q_1010000016321028]*

[https_segmentfault.com_q_1010000016321028]: https://segmentfault.com/q/1010000016321028

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关【异常】报错：TypeError: Cannot read properties of undefined (reading ‘init‘)

一、报错内容在vue当中引用echarts，控制台报错： “TypeError: Cannot read properties of undefined (readin

曾经终败给现在/ 2024年02月17日 11:35/ 0 赞/ 115 阅读

相关 Vue.js 报错：Cannot read property ‘validate‘ of undefined“

错误解决起因，是我将elemnt-ui登录，默认放在mounted()函数里面，导致vue初始化就调用这个函数。找了网上，有以下错误原因： 1.一个是你ref写错

左手的ㄟ右手/ 2023年10月15日 15:54/ 0 赞/ 80 阅读

相关 Vue中bus报错TypeError: Cannot read property ‘$emit‘ of undefined

我们发现，在A销毁之前，B组件的beforeCreate ，created，和beforeMount这三个钩子函数先触发，之后才是A组件的销毁钩子的触发，因为总线Bus要求要先

迈不过友情╰/ 2023年10月11日 14:28/ 0 赞/ 70 阅读

相关 Vue 报错：Cannot read property ‘validate‘ of undefined“

有时候用了报错，有时候不报错，一直不晓得原因，现在终于是弄懂了 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

我会带着你远行/ 2023年08月17日 16:01/ 0 赞/ 186 阅读

相关 Vue.js 报错：Cannot read property 'validate' of undefined"

记录一下，在写表单提交先验证必填项，突然给我报了个错问题描述：提示说：Cannot read property 'validate' of undefi

亦凉/ 2023年06月19日 05:24/ 0 赞/ 45 阅读

相关 webpack使用compression-webpack-plugin插件的时候报错Cannot read property ‘emit‘ of undefined

把compression-webpack-plugin降到1.1.12就不会报错了卸载`npm uninstall compression-webpack-plugin`

╰半夏微凉°/ 2023年02月25日 07:28/ 0 赞/ 8 阅读

相关 Vue开启Gzip打包异常：webpack打包报错Cannot read property ‘emit‘ of undefined

Vue开启Gzip打包异常：webpack打包报错Cannot read property 'emit' of undefined 相关代码 const Co

亦凉/ 2023年02月24日 11:22/ 0 赞/ 3 阅读

相关 Vue 打包后报错Cannot read property NODE_ENV of undefined

build/webpack.prod.conf.js中需要配置DefinePlugin如下 var webpack = require('webpack')

叁歲伎倆/ 2023年02月13日 12:23/ 0 赞/ 36 阅读

相关 vue-cli开启gzip打包报错TypeError: Cannot read property ‘tapPromise‘ of undefined-解决

给项目增加gzip打包 > yarn add compression-webpack-plugin -D（默认安装的是7以上的最新版本）修改vue.config.j

灰太狼/ 2022年10月16日 06:14/ 0 赞/ 228 阅读

相关 Vue.js 报错：Cannot read property 'validate' of undefined"

问题： \[Vue warn\]: Error in event handler for "click": "TypeError: Cannot read pr

梦里梦外;/ 2022年04月22日 09:26/ 0 赞/ 240 阅读