《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就行,自然而然的错了。那怎样做呢?
我们需要以下几步:
- 用npm安装uglifyjs-webpack-plugin插件;
- 将其引入:var uglifyjsPlugin=require('uglifyjs-webpack-plugin');
- 删除以前的写法,将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
})
],
//压缩js
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: false
}
})
]
},
})