//压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)
new OptimizeCSSPlugin(),
//生成html的插件,引入css文件和js文件
new HtmlWebpackPlugin({
filename: config.build.index, //生成的html的文件名
template: 'index.html', //依据的模板
inject: true, //注入的js文件将会被放在body标签中,当值为'head'时，将被放在head标签中
minify: { //压缩配置
removeComments: true, //删除html中的注释代码
collapseWhitespace: true, //删除html中的空白符
removeAttributeQuotes: true //删除html元素中属性的引号
},
chunksSortMode: 'dependency' //按dependency的顺序引入
}),
//分离公共js到vendor中
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', //文件名
minChunks: functions(module, count) { // 声明公共的模块来自node_modules文件夹
return (module.resource && /.js$/.test(module.resource) && module,resource.indexOf(path.join(__dirname, '../node_modules')) === 0)
}
}),
//上面虽然已经分离了第三方库,每次修改编译都会改变vendor的hash值，导致浏览器缓存失效。原因是vendor包含了webpack在打包过程中会产生一些运行时代码，运行时代码中实际上保存了打包后的文件名。当修改业务代码时,业务代码的js文件的hash值必然会改变。一旦改变必然会导致vendor变化。vendor变化会导致其hash值变化。
//下面主要是将运行时代码提取到单独的manifest文件中，防止其影响vendor.js
new webpack.optimize.CommonsChunkPlugin({
name: 'mainifest',
chunks: ['vendor'] }),
// 复制静态资源,将static文件内的内容复制到指定文件夹
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*'] //忽视.*文件
}])
]
额外配置
if (config.build.productionGzip) { //配置文件开启了gzip压缩 //引入压缩文件的组件,该插件会对生成的文件进行压缩，生成一个.gz文件
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]', //目标文件名
algorithm: 'gzip', //使用gzip压缩
test: new RegExp( //满足正则表达式的文件会被压缩
'.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240, //资源文件大于10240B=10kB时会被压缩
minRatio: 0.8 //最小压缩比达到0.8时才会被压缩
})
)
}
npm run dev
有了上面的配置之后，下面看看运行命令
npm run dev
