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