PMS_Frontend_v1.0.0/scripts/webpack.prod.js

process.env.NODE_ENV = "production"
const path = require("path")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const { merge } = require("webpack-merge")
const commonConfig = require("./webpack.common")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CopyPlugin = require("copy-webpack-plugin")
const TerserPlugin = require("terser-webpack-plugin")
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin

const isSMP = process.env.smp == "true"
const isAnalyze = process.env.analyze == "true"

const miniCssExtractPluginConfig =  new MiniCssExtractPlugin({
  filename: "static/css/[name]_[chunkhash:4].css"
})

let _prodConfig = {
  mode: "production",
  stats: "errors-only",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["autoprefixer"]],
              },
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["autoprefixer"]],
              },
            },
          },
          "sass-loader",
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        include: "src",
      }),
      new TerserPlugin({
        extractComments: false,
        include: "src",
      }),
    ],
    splitChunks: {
      chunks: "all",
      minSize: 20000,
      minChunks: 1,
      maxAsyncRequests: 6,
      maxInitialRequests: 8,
      automaticNameDelimiter: "~",
      // name: true,
      cacheGroups: {
        locallibs: {
          test: /[\\/]node_modules[\\/](react|react-dom|redux|react-redux|react-router-dom|antd)[\\/]/,
          name: "locallibs",
          priority: -4,
        },
        localuis: {
          test: /[\\/]node_modules[\\/](@ant-design|moment)[\\/]/,
          name: "localuis",
          priority: -5,
        },
        localmobileuis: {
          test: /[\\/]node_modules[\\/](antd-mobile)[\\/]/,
          name: "localmobileuis",
          priority: -6,
        },
        localcharts: {
          test: /[\\/]node_modules[\\/](echarts|echarts-gl|echarts-for-react)[\\/]/,
          name: "localcharts",
          priority: -7,
        },
        localvideos: {
          test: /[\\/]node_modules[\\/](xgplayer|xgplayer-flv|flv.js)[\\/]/,
          name: "localvideos",
          priority: -8,
        },
        localmaps: {
          test: /[\\/]node_modules[\\/](leaflet|leaflet.chinatmsproviders)[\\/]/,
          name: "localmaps",
          priority: -9,
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: -10,
        },
        default: {
          name: "default",
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  plugins: [
    miniCssExtractPluginConfig,
    new CopyPlugin({
      patterns: [
        {
          from: "public/static/",
          to: "static/",
        },
        {
          from: "release",
          to: "static/",
        },
      ],
    }),
    isAnalyze && new BundleAnalyzerPlugin(),
  ].filter(Boolean),
}

let prodConfig = merge(commonConfig, _prodConfig)

if (!isSMP) {
  module.exports = prodConfig
} else {
  // 处理SpeedMeasurePlugin兼容问题
  let index = prodConfig.plugins.findIndex(plugin => {
    return plugin === miniCssExtractPluginConfig
  })
  prodConfig.plugins.splice(index, 1)
  const smp = new SpeedMeasurePlugin()
  prodConfig = smp.wrap(prodConfig)
  prodConfig.plugins.push(miniCssExtractPluginConfig)
  module.exports = prodConfig
}