按照教程上配置文件如下:
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 } } }) ] } });