vue-cli中配置webpack系列文章七 ------ webpack.prod.conf.js

時間 2019-11-10
標籤 vue cli 配置 webpack 系列文章 webpack.prod.conf.js prod conf 欄目 JavaScript 简体版
原文原文鏈接
webpack.prod.conf.jsjavascript
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')
  var ExtractTextPlugin = require('extract-text-webpack-plugin')
  var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
  // 獲取當前環境
  var env = config.build.env
  var webpackConfig = merge(baseWebpackConfig, {
    module: {
      // 將.vue外部的css或css預處理器文件進行處理
      rules: utils.styleLoaders({
        sourceMap: config.build.productionSourceMap,
        extract: true
      })
    },
    // 是否開啓調試
    devtool: config.build.productionSourceMap ? '#source-map' : false,
    output: {
      path: config.build.assetsRoot,
      filename: utils.assetsPath('js/[name].[chunkhash].js'),
      // 定義在非入口文件引用的文件的名稱
      chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    },
    plugins: [
      // 定義一個在編譯時間內能夠使用的全局變量，用來關閉vue的全部警告功能
      new webpack.DefinePlugin({
        'process.env': env
      }),
      // 最小化全部JavaScript輸出塊，消除無做用的代碼
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        },
        sourceMap: false
      }),
      // ExtractTextPlugin會將全部的「入口 chunk(entry chunks)」中的 require("style.css") 移動到獨立分離的css文件。所以，樣式再也不內聯到javascript裏面，但會放到一個單獨的css包文件 (styles.css)當中。 若是樣式文件較大，這會更快，由於樣式文件會跟javascript包並行加載
      new ExtractTextPlugin({
        filename: utils.assetsPath('css/[name].[contenthash].css')
      }),
      // 壓縮提取出來的CSS，而且進行css的複用以解決extract-text-webpack-plugin將css處理後會出現的css重複的狀況
      new OptimizeCSSPlugin({
        cssProcessorOptions: {
          safe: true
        }
      }),
      // 構建要編譯輸出的index.html,並在文件中嵌入資源文件
      new HtmlWebpackPlugin({
        // 輸出的HTML文件名
        filename: config.build.index,
        // 模板文件路徑
        template: 'index.html',
        // 設置爲true或body能夠將js代碼放到<body>元素最後
        // 設置爲head將js代碼加到<head>裏面
        // 設置爲false全部靜態資源css和JavaScript都不會注入到模板文件中
        inject: true,
        minify: {
          // 刪除註釋
          removeComments: true,
          // 合併空白
          collapseWhitespace: true,
          // 刪除屬性的引號
          removeAttributeQuotes: true
        },
        // 經過CommonsChunkPlugin控制chunks在html文件中添加的順序  
        // 設置爲dependency即按照它們之間的依賴關係添加
        chunksSortMode: 'dependency'
      }),
      // webpack將公共模塊打包的vendor.js裏面使用CommonsChunkPlugin將vendor.js分離到單獨的文件
      new webpack.optimize.CommonsChunkPlugin({
        // 公共模塊名字
        name: 'vendor',
        minChunks: function(module, count) {
          return (
            module.resource &&
            /\.js$/.test(module.resource) &&
            module.resource.indexOf(
              path.join(__dirname, '../node_modules')
            ) === 0
          )
        }
      }),
      // 使用CommonsChunkPlugin能夠保證若是咱們的第三方插件沒有變更，在打包的時候能夠不被從新的打包
      // 待到上線後就不會從新的加載以達到緩存的目的
      // 咱們會得到webpack執行時間和輸出一份json文件保存chunk的id和最終引用它們的文件印射關係
      new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        chunks: ['vendor']
      }),
      // 複製static文件夾內的靜態資源到打包好的文件中
      // 具體的路徑是以前咱們設置的"config.build.assetsSubDirectory"
      new CopyWebpackPlugin([{
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }])
    ]
  })
  // 若是開啓了Gzip壓縮，使用如下配置
  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
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。