webpack.prod.conf.js
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
// 猎取当前环境
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
module: {
// 将.vue外部的css或css预处置惩罚器文件举行处置惩罚
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
// 是不是开启调试
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
// 定义在非进口文件援用的文件的称号
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// 定义一个在编译时间内能够运用的全局变量，用来封闭vue的一切正告功用
new webpack.DefinePlugin({
'process.env': env
}),
// 最小化一切JavaScript输出块，消弭无作用的代码
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: false
}),
// ExtractTextPlugin会将一切的「进口 chunk(entry chunks)」中的 require("style.css") 移动到自力星散的css文件。因而，款式不再内联到javascript内里，但会放到一个零丁的css包文件 (styles.css)当中。 假如款式文件较大，这会更快，由于款式文件会跟javascript包并行加载
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// 紧缩提取出来的CSS，而且举行css的复用以处理extract-text-webpack-plugin将css处置惩罚后会涌现的css反复的状况
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// 构建要编译输出的index.html,并在文件中嵌入资本文件
new HtmlWebpackPlugin({
// 输出的HTML文件名
filename: config.build.index,
// 模板文件途径
template: 'index.html',
// 设置为true或body能够将js代码放到<body>元素末了
// 设置为head将js代码加到<head>内里
// 设置为false一切静态资本css和JavaScript都不会注入到模板文件中
inject: true,
minify: {
// 删除解释
removeComments: true,
// 兼并空缺
collapseWhitespace: true,
// 删除属性的引号
removeAttributeQuotes: true
},
// 经由过程CommonsChunkPlugin掌握chunks在html文件中增加的递次
// 设置为dependency即根据它们之间的依靠关联增加
chunksSortMode: 'dependency'
}),
// webpack将大众模块打包的vendor.js内里运用CommonsChunkPlugin将vendor.js星散到零丁的文件
new webpack.optimize.CommonsChunkPlugin({
// 大众模块名字
name: 'vendor',
minChunks: function(module, count) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// 运用CommonsChunkPlugin能够保证假如我们的第三方插件没有更改，在打包的时刻能够不被从新的打包
// 待到上线后就不会从新的加载以到达缓存的目标
// 我们会取得webpack执行时间和输出一份json文件保留chunk的id和终究援用它们的文件印射关联
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
// 复制static文件夹内的静态资本到打包好的文件中
// 详细的途径是之前我们设置的"config.build.assetsSubDirectory"
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}])
]
})
// 假如开启了Gzip紧缩，运用以下设置
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
// 假如开启了编译报告，运用以下设置
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig