《vue.js的实战》这本书已经看到了后半段，今天在实现插件合并时，我完整录入了书中的代码，代码是这样的

var webpack=require('webpack');
//这个插件是用来生成html的
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=[];//用于合并两个webpack的配置文件
module.exports=merge(webpackBaseConfig,{output:{publicPath:'/dist/',//给文件名加hash值，是为了使文件名唯一，这样只要不对html文件设置缓存，上线后立即就可以加载最新的静态资源filename:'[name].[hash].js'},plugins:[new ExtractTextPlugin({filename:'[name].[hash].css',allChunks:true}),//定义当前生产环境为node环境new webpack.DefinePlugin({'process.env':{NODE_ENV:'"production"'}}),//提取模板，并保存入口html文件//这是来生成html文件的，它通过template选项来读取指定的模板index.ejs,然后输出到filename指定的文件new HtmlwebpackPlugin({filename:'../index_prod.html',template:'./index.ejs',inject:false}),new webpack.optimize.UglifyJsPlugin({compress:{  warnings:false}})]
})

后来运行的时候出现了错误

webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

后来查了很多资料才知道是webpack版本的问题，在webpack4.0版本中已经废弃了之前 UglifyJsPlugin的用法，用的是config.minimize，然后怎样用optimization呢，网上资料很多，但是对于一个不熟悉nodejs的人来说，还是比较困难的，我开始以为直接把new HtmlwebpackPlugin改成optimization就行，自然而然的错了。那怎样做呢？

我们需要以下几步：

1. 用npm安装uglifyjs-webpack-plugin插件;
2. 将其引入：var uglifyjsPlugin=require('uglifyjs-webpack-plugin');
3. 删除以前的写法，将optimization的JS压缩与plugins并排写在一起，注意，是并排，而不是像以前一样写在plugins里面。

最后结果如下：

ar webpack=require('webpack');
//这个插件是用来生成html的
var HtmlwebpackPlugin=require('html-webpack-plugin');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var merge=require('webpack-merge');
var webpackBaseConfig=require('./webpack.config.js');
var UglifyJsPlugin=require('uglifyjs-webpack-plugin');//清空基本配置的插件列表
webpackBaseConfig.plugins=[];//用于合并两个webpack的配置文件
module.exports=merge(webpackBaseConfig,{output:{publicPath:'/dist/',//给文件名加hash值，是为了使文件名唯一，这样只要不对html文件设置缓存，上线后立即就可以加载最新的静态资源filename:'[name].[hash].js'},plugins:[new ExtractTextPlugin({filename:'[name].[hash].css',allChunks:true}),//定义当前生产环境为node环境new webpack.DefinePlugin({'process.env':{NODE_ENV:'"production"'}}),//提取模板，并保存入口html文件//这是来生成html文件的，它通过template选项来读取指定的模板index.ejs,然后输出到filename指定的文件new HtmlwebpackPlugin({filename:'../index_prod.html',template:'./index.ejs',inject:false})],//压缩jsoptimization: {minimizer: [new UglifyJsPlugin({uglifyOptions: {compress: false}})]},
})