下面介紹webpack.prod.conf.js中相關配置代碼和配置的說明，建議先查閱build/webpack.prod.conf.js

/*
 * Webpack 生產環境配置文件，用於生產環境執行Build
 * 執行Build 主要是用Webpack執行這裏的配置
 * 建議先查閱webapck.base.conf.js ../config/index.js
*/

var path = require(‘path‘)
var utils = require(‘./utils‘) // 下面是utils工具配置文件，主要用來處理css類文件的loader
var webpack = require(‘webpack‘)
 
var config = require(‘../config‘)
var merge = require(‘webpack-merge‘) // 用merge的方式繼承base.conf裏面的配置
var baseWebpackConfig = require(‘./webpack.base.conf‘)
var CopyWebpackPlugin = require(‘copy-webpack-plugin‘) // copy-webpack-plugin使用來復制文件或者文件夾到指定的目錄的
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘) //
 
 html-webpack-plugin是生成html文件，可以設置模板
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘) // extract-text-webpack-plugin這個插件是用來將bundle中的css等文件生成單獨的文件，比如我們看到的app.css
var OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin‘)
//壓縮css代碼的，還能去掉extract-text-webpack-plugin插件抽離文件產生的重復代碼，因為同一個css可能在多個模塊中出現所以會導致重復代碼，一般都是配合使用
 



// 如果當前環境變量NODE_ENV的值是testing，則導入 test.env.js配置文，設置env為"testing"
// 如果當前環境變量NODE_ENV的值不是testing，則設置env為"production"
var env = process.env.NODE_ENV === ‘testing‘
  ? require(‘../config/test.env‘)
  : config.build.env

// 把當前的配置對象和base.conf基礎的配置對象合並
var webpackConfig = merge(baseWebpackConfig, {
  module: {
    // 下面就是把utils配置好的處理各種css類型的配置拿過來，和dev設置一樣，就是這裏多了個extract: true，此項是自定義項，設置為true表示，生成獨立的文件
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  // devtool開發工具，用來生成個sourcemap方便調試，只用於生產環境
  devtool: config.build.productionSourceMap ? ‘#source-map‘ : false,
  output: {
    // 和base.conf中一致，輸出文件的路徑：config目錄下的index.js，path.resolve(__dirname, ‘../dist‘)
    path: config.build.assetsRoot,
    // 有區別，輸出文件加上的chunkhash
    filename: utils.assetsPath(‘js/[name].[chunkhash].js‘),
    // 非入扣文件配置，異步加載的模塊，輸出文件加上的chunkhash
    chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js‘)
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      ‘process.env‘: env// line-21 下面是利用DefinePlugin插件，定義process.env環境變量為env
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false // 禁止壓縮時候的警告信息
      },
      sourceMap: true // 壓縮後生成map文件
    }),
    // extract css into its own file，已經很清楚了就是獨立css文件，文件名和hash
    new ExtractTextPlugin({
      filename: utils.assetsPath(‘css/[name].[contenthash].css‘)
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === ‘testing‘
        ? ‘index.html‘
        : config.build.index,
      template: ‘index.html‘, // 模板是index.html加不加無所謂
      inject: true, // 將js文件註入到body標簽的結尾
      minify: {  // 壓縮html頁面
        removeComments: true, // 去掉註釋
        collapseWhitespace: true, // 去除無用空格
        removeAttributeQuotes: true// 去除無用的雙引號
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: ‘dependency‘ // 可以對頁面中引用的chunk進行排序，保證頁面的引用順序
    }),
    // split vendor js into its own file
    // 公共模塊插件，便於瀏覽器緩存，提高程序的運行速度（哪些需要打包進公共模塊需要取舍）
    new webpack.optimize.CommonsChunkPlugin({
      name: ‘vendor‘, // 公共模塊的名稱，對應打包出來的js是vendor.js
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        // 存在資源，且以js結尾，且路徑在node_node_modules下的都打包進來（這裏可以根據項目的時機情況做調整）
        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
    // 把webpack的runtime代碼和module manifest代碼提取到manifest.js文件中，防止修改了代碼但是沒有修改第三方庫文件導致第三方庫文件也打包的問題
    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壓縮插件
if (config.build.productionGzip) { // 修改config裏面的配置才能開啟
  var CompressionWebpackPlugin = require(‘compression-webpack-plugin‘)// Gzip插件

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: ‘[path].gz[query]‘,
      algorithm: ‘gzip‘,
      test: new RegExp(
        ‘\\.(‘ +
        config.build.productionGzipExtensions.join(‘|‘) +
        ‘)$‘
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

// 模塊化分析插件
// 文檔好像沒有提檔說明如何使用，看config/index.js中的註釋，npm run build --report 可以看到，或者修改config裏面的配置
if (config.build.bundleAnalyzerReport) { // 模塊分析，會在127.0.0.1：8080生成模塊打包分析結果
  var BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig // 導出所有配置

參考：http://www.cnblogs.com/ye-hcj/archive/2017/06.html

vue-cli腳手架npm相關文件說明-2、webpack.prod.conf.js