Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimizat

Posted 2020-11-22 用脑袋行走的人

按照教程上配置文件如下：

var webpack=require(\'webpack\');
var htmlwebpackPlugin=require(\'html-webpack-plugin\');
var ExtractTextPlugin=require(\'extract-text-webpack-plugin\');
var merge=require(\'webpack-merge\');
var webpackBaseConfig=require(\'./webpack.config.js\');

// 清空基本配置的插件列表
webpackBaseConfig.plugins=[];

module.exports=merge(webpackBaseConfig,{
    output:{
        publicPath:\'/dist/\',
        // 将入口文件重命名为带有20位hash值得唯一文件
        filename:\'[name].[hash].js\'
    },
    plugins:[
        new ExtractTextPlugin({
            // 提取CSS，并重命名为带有20为hash值得唯一文件
            filename:\'[name].[hash].css\',
            allChunks:true
        }),
        // 定义当前node环境为生产环境
        new webpack.DefinePlugin({
            \'process.env\':{
                NODE_ENV:\'"production"\'
            }
        }),
        // 压缩js
            new webpack.optimize.UglifyJsPlugin({
                compress:{
                    warnings:false
                }
            }),
        // 提取模板，并保存入口html文件
        new HtmlwebpackPlugin({
            filename:\'../index_prod.html\',
            template:\'./index.ejs\',
            inject:false
        })
    ]
});

报错：

 

 

 原因：报错的原因是webpack4已经升级不支持这种写法了,也就是说不在plugins里面进行操作。而是放在了optimization里面,写法不变下面贴代码

解决方法：

运行 npm install --save-dev uglifyjs-webpack-plugin 安装uglifyjsPlugin

修改配置如下：

......
const UglifyJsPlugin=require(\'uglifyjs-webpack-plugin\');

// 清空基本配置的插件列表
webpackBaseConfig.plugins=[];

module.exports=merge(webpackBaseConfig,{
    output:{
        publicPath:\'/dist/\',
        // 将入口文件重命名为带有20位hash值得唯一文件
        filename:\'[name].[hash].js\'
    },
    plugins:[
        ......
    ],
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                uglifyOptions: {
                    output: {
                        comments: false
                    },
                    compress: {
                        warnings: false,
                        drop_debugger: true,
                        drop_console: true
                    }
                }
            })
        ]
    }
});