igroot-builder/config/webpack.prod.js

白山——zeus系统前端打包工具

const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const TerserPlugin = require('terser-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanDirPlugin = require('../CleanDirPlugin')
const baseConfig = require('./webpack.base')
const { resolveAssets, entryDirs, md5 } = require('../utils')
const { options: {
  define,
  sourceMap,
  publicPath,
  buildPath,
  pwa,
  gzip,
  analyze,
  extend
} } = require('../bsy')

// 我是乱来的
const pkgHash = md5(JSON.stringify(require(path.resolve('package.json'))), 20)
const extendConfig = extend ? require(path.resolve(extend)) : undefined

const config = merge(baseConfig, {
  mode: 'production',
  entry: entryDirs.reduce((result, dir) => {
    result[dir] = [
      path.join(__dirname, '../runtime.js'),
      path.resolve(`src/pages/${dir}/index.jsx`)
    ]

    return result
  }, {}),

  cache: {
    type: "filesystem",
    name: "webpack5-build-cache",
    buildDependencies: {
      // 更改config时，使得缓存无效
      config: [__filename],
    },
  },

  output: {
    publicPath,
    filename: '[name].[chunkhash].js',
    path: path.resolve(buildPath),
    chunkFilename: resolveAssets('js/[id].[chunkhash].js')
  },

  optimization: {
    moduleIds: "deterministic",
    chunkIds: "deterministic",
    runtimeChunk: {
      name: entry => resolveAssets(`js/runtime.${entry.name}`)
    },
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          parse: { ecma: 8 },
          compress: {
            ecma: 5,
            warnings: false,
            comparisons: false,
            inline: 2,
          },
          mangle: {
            safari10: true,
          },
          keep_classnames: true,
          keep_fnames: true,
          output: {
            ecma: 5,
            comments: false,
            ascii_only: true,
          },
        },
      }),

      // 默认开启并行压缩
      new CssMinimizerPlugin({})
    ]
  },

  plugins: [
    new CleanDirPlugin([
      path.resolve(buildPath, resolveAssets('js')),
      path.resolve(buildPath, resolveAssets('css'))
    ]),
    new webpack.DefinePlugin({
      'process.env': '"production"',
      APP_CONFIG: JSON.stringify(define)
    }),
    new CopyWebpackPlugin([{
      from: path.resolve('./src/static'),
      to: path.resolve(buildPath, 'static'),
      ignore: ['.*']
    }]),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(buildPath, 'manifest.json')
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ...entryDirs.map(dir => {
      // https://github.com/ampedandwired/html-webpack-plugin
      return new HtmlWebpackPlugin({
        filename: `${dir}.html`,
        template: path.resolve(`src/pages/${dir}/index.html`),
        chunks: [resolveAssets(`js/runtime.${dir}`), dir],
        vendors: `<script src="${publicPath}vendors.dll.js?${pkgHash}"></script>`,
        minify: {
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeComments: true,
          removeRedundantAttributes: true,
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true,
          useShortDoctype: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true
          // more options:
          // https://github.com/kangax/html-minifier#options-quick-reference
        },
        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
        chunksSortMode: 'auto'
      })
    })
  ]
}, extendConfig)

if (pwa) {
  const WorkboxPlugin = require('workbox-webpack-plugin')
  config.plugins.push(new WorkboxPlugin.GenerateSW({
    clientsClaim: true,
    skipWaiting: true,
    runtimeCaching: [{
      urlPattern: /vendors\.dll\.js/,
      handler: 'NetworkFirst'
    }]
  }))
}

if (gzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')
  config.plugins.push(new CompressionWebpackPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
    threshold: 10240,
    minRatio: 0.8
  }))
}

if (analyze) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  config.plugins.push(new BundleAnalyzerPlugin())
}


module.exports = config