详解vue-cli 2.0配置文件(小结)(6)

/* eslint-disable */
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')
// 用于从webpack生成的bundle中提取文本到特定文件中的插件
// 可以抽取出css，js文件将其与webpack输出的bundle分离
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

var env = config.build.env
// 合并基础的webpack配置
var webpackConfig = merge(baseWebpackConfig, {
 module: {
 rules: utils.styleLoaders({
  sourceMap: config.build.productionSourceMap,
  extract: true
 })
 },
　// 7中sourceMap上面有讲过
 devtool: config.build.productionSourceMap ? '#source-map' : false,
　// 配置webpack输出的目录，及文件命名规则
 output: {
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].min.js'),
 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 },
　// webpack插件配置
 plugins: [
 // 同webpack.dev.conf.js
 new webpack.DefinePlugin({
  'process.env': env
 }),
　　// 丑化代码
 new webpack.optimize.UglifyJsPlugin({
  compress: {
  warnings: false
  },
  sourceMap: true
 }),
 // 抽离css文件到单独的文件
 new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].min.css')
 }),
 new OptimizeCSSPlugin({
  cssProcessorOptions: {
  safe: true
  }
 }),
 // 生成并注入index.html
 new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
  removeComments: true,
  collapseWhitespace: false,
  removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
 }),
 // keep module.id stable when vender modules does not change
 new webpack.HashedModuleIdsPlugin(),
 split vendor js into its own file
 new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module, count) {
  // any required modules inside node_modules are extracted to vendor
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0
  )
  }
 }),
 extract webpack runtime and module manifest to its own file in order to
 prevent vendor hash from being updated whenever app bundle is updated
 new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
 }),
 copy custom static assets
 new CopyWebpackPlugin([
  {
  from: path.resolve(__dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
  }
 ])
 ]
})
// gzip模式下需要引入compression插件进行压缩
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