vue - webpack.prod.conf.js

描述：webpack打包项目时的配置文件.

命令：yarn run build 或 npm run build

打包后，生成的文件在dist文件夹下

打包后，要在服务器环境下运行！！！

关于怎样运行，请查看：https://www.cnblogs.com/cisum/p/9370163.html , 

'use strict'

// 路径
const path = require('path')
// utils
const utils = require('./utils')
// webpack打包
const webpack = require('webpack')
// 来自cofig/index.js
const config = require('../config')
// 对象合并
const merge = require('webpack-merge')
// webpack基本配置
const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env = require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
// 混淆加密JavaScript
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// 将css提取到自己的文件中
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
//将以下选项设置为“false”将不会从codesplit块中提取CSS。
//当webpack加载了codesplit块时，他们的CSS将使用style-loader动态插入。
//它当前设置为“true”，因为我们看到源代码包含在codesplit包中，当它是“false”时，
//增加文件大小：https：//github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
//压缩提取的CSS。 我们正在使用这个插件，以便可能
//可以删除来自不同组件的重复CSS。
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
//使用正确的资产哈希生成dist index.html以进行缓存。
//您可以通过编辑/index.html来自定义输出
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// 更多选项:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// 通过CommonsChunkPlugin持续使用多个块的必要条件
chunksSortMode: 'dependency'
}),
// 原本模块没有改变时，保持module.id稳定
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// 将原本模块js拆分为自己的文件
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks(module) {
// node_modules中的任何必需模块都将解压缩到原模块
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),

//将webpack运行时和模块清单提取到自己的文件中
//每当应用程序包更新时，都会阻止更新供应商哈希
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),

//此实例从代码拆分块中提取共享块并捆绑它们
//在一个单独的块中，类似于供应商块
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),

// 复制自定义静态目录
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})

// 配置Gzip压缩
if (config.build.productionGzip) {
const 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
})
)
}

// 使用交互式可缩放树形图可视化webpack输出文件的大小
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

11