您的位置:首页 > Web前端 > Vue.js

vue脚手架初始化项目中配置文件webpack.prod.conf.js代码含义

2018-06-08 19:47 1036 查看
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
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
output: {
path: config.build.assetsRoot,
// 编译输出文件名格式
filename: utils.assetsPath('js/[name].[chunkhash].js'),
// 没有指定输出名的文件输出的文件名格式
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
new webpack.DefinePlugin({
'process.env': env//生产环境下
}),
new UglifyJsPlugin({//压缩代码
uglifyOptions: {
compress: {
warnings: false
        }
},
sourceMap: config.build.productionSourceMap,
parallel: true
    }),
//提取css文件
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
allChunks: true,//设置为“false”时,不会提取CSS。CSS将被webpack使用style-loader动态加载。
}),
//压缩提取的CSS文件,删除不同组件中重复的CSS代码。
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
: { safe: true }
}),

//以src/index.html为模板,将打包后的结果,自动引入到html中并产出到dist目录下。
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
      },
chunksSortMode: 'dependency'
    }),
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),

//多入口文件,可能存在重复代码,把公共代码分类提取到不同的文件
// CommonsChunkPlugin初始化常用参数?
// name: 这个给公共代码的chunk唯一的标识
// filename,如何命名打包后生产的js文件,也是可以用上[name]、[hash]、[chunkhash]
// minChunks,公共代码的判断标准:某个js模块被多少个chunk加载了才算是公共代码
new webpack.optimize.CommonsChunkPlugin({
//位于node_modules中的必需的第三方模块将被提取到vendor.js文件。
name: 'vendor',
minChunks (module) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
new webpack.optimize.CommonsChunkPlugin({
// webpack runtime and module manifest 将被提取到manifest.js文件。
name: 'manifest',
minChunks: Infinity
    }),
new webpack.optimize.CommonsChunkPlugin({
//其它公共代码提取到app.js中
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),

// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})

// gzip模式下引入compression插件进行压缩
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
})
)
}

if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig
阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: