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