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

標籤：roc   sid   roo   hash   方式   ash   amp   複製檔案   via   

下面介紹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類檔案的loadervar 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.cssvar 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