build 文件夾中的 webpack.prod.conf.js

 

// 此文件是生產環境下webpack相關配置
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config') // 引入全局配置
const merge = require('webpack-merge') // webpack-merge插件提供合並功能，將多個對象合並創建一個新對象。
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin') // 用來復制
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自動生成html文件
// const ExtractTextPlugin = require('extract-text-webpack-plugin') // 用來抽離css 防止css打包壓縮到js中
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //將css單獨打包成一個文件的插件，它為每個包含css的js文件都創建一個css文件
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') // 用來壓縮單獨的css文件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') //用來壓縮

//導入prod.env.js 用來區分是生產環境
const env = process.env.NODE_ENV === 'testing' ?
  require('../config/test.env') :
  require('../config/prod.env')

// 合並
const webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  module: {
    // 配置獨立的css文件的解析規則
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      // 生成獨立的文件
      extract: true,
      usePostCSS: true
    })
  },
  // 開發工具 用來調試
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  // 輸出
  output: {
    // 打包后的文件放在dist目錄下面
    path: config.build.assetsRoot,
    // 編譯生成的js文件存放在根目錄下的js目錄下，如果js文件夾不存在就自動創建
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    // 用來打包require.ensure方法中引入的模塊，如果該方法中沒有引入任何模塊，就不會生成chunk文件
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  // 優化 （https://webpack.docschina.org/configuration/optimization/）
  optimization: {
    moduleIds: 'hashed', // 告知 webpack 當選擇模塊 id 時需要使用哪種算法 （ 'hashed' 相應地會在 webpack 5 中廢棄,被 'deterministic' 代替 ）
    // 拆分模塊 （https://www.cnblogs.com/kwzm/p/10314438.html）
    splitChunks: {
      chunks: 'async', // 選擇用於確定共享模塊的塊(默認為“async”、“initial”和“all”需要將這些塊添加到HTML中)
      minSize: 30000, // 創建塊的大小
      // minRemainingSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 6,
      maxInitialRequests: 4,
      automaticNameDelimiter: '~',
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        },
        elementUI: {
          name: "chunk-elementUI", // 單獨將 elementUI 拆包
          priority: 15, // 權重需大於其它緩存組
          test: /[\/]node_modules[\/]element-ui[\/]/
        }
      }
    }
  },
  //配置插件項
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    // 自定義一個plugin 生成當前環境下的一個變量
    new webpack.DefinePlugin({
      'process.env': env
    }),
    //壓縮
    new UglifyJsPlugin({
      uglifyOptions: {
        // 禁止壓縮警告信息
        warnings: false
      },
      sourceMap: config.build.productionSourceMap, //是否開啟sourceMap 用來調試
      parallel: true //在系統的CPU有多於一個內核時自動啟用 僅作用於生產構建
    }),
    // 將css解壓縮到它自己的文件中
    new MiniCssExtractPlugin({
      //文件名
      filename: utils.assetsPath('css/app.[name].css'),
      chunkFilename: utils.assetsPath('css/app.[contenthash:12].css'), // use contenthash *
    }),
    //壓縮提取CSS。我們使用這個插件，所以可以從不同的組件復制CSS。
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap ? {
        safe: true,
        map: {
          inline: false
        }
      } : {
        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',
      favicon: path.resolve(__dirname, '../static/images/favicon.ico'),
      inject: true,
      minify: {
        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: 'manual',
      dll: (function () {
        let max = 2
        let res = []
        for (let i = 0; i < max; i++) {
          const dllName = require(path.resolve(__dirname, `../dllManifest/xuAdmin${i}-manifest.json`)).name.split('_')
          res.push(`./static/dll/${dllName[0]}.${dllName[1]}.dll.js`)
        }
        return res
      })()
    }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file

    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated

    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk


    // 復制自定義靜態資產
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }]),
  ]
})


//壓縮
if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]', // 目標資源名稱 [path]會被替換成原始資源的路徑 [query]會被替換成查詢字符串
      algorithm: 'gzip', // 按照zlib的算法
      // 所有匹配該正則的資源都會被處理 默認值是全部資源
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240, // 只有大小大於該值得資源會被處理，單位是bytes
      minRatio: 0.8 // 壓縮率小於這個值得資源才會被處理 默認值是 0.8
    })
  )
}

//打包文件分析工具
if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

//導出
module.exports = webpackConfig