module: {
  rules: [
    // ...
    {
      test: /\.(jpe?g|png|gif)$/i,
      type: 'asset',
      generator: {
        // 输出文件位置以及文件名
        // [ext] 自带 "." 这个与 url-loader 配置不同
        filename: "[name][hash:8][ext]"
      },
      parser: {
        dataUrlCondition: {
          maxSize: 50 * 1024 //超过50kb不转 base64
        }
      }
    },
    {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
      type: 'asset',
      generator: {
        // 输出文件位置以及文件名
        filename: "[name][hash:8][ext]"
      },
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024 // 超过100kb不转 base64
        }
      }
    },
    {
        test: /\.js$/i,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true, // 启用缓存
              presets: [
                '@babel/preset-env'
              ],
            }
          }
        ]
      },
  ]
}
// ./babelrc.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        // useBuiltIns: false 默认值，无视浏览器兼容配置，引入所有 polyfill
        // useBuiltIns: entry 根据配置的浏览器兼容，引入浏览器不兼容的 polyfill
        // useBuiltIns: usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加
        module: false, // 开启 tree-shaking
        useBuiltIns: "entry",
        corejs: "3.9.1", // 是 core-js 版本号
        targets: {
          chrome: "58",
          ie: "11",
        },
      },
    ],
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
  ]
};

optimization: {
  splitChunks: {
    cacheGroups: //配置提取模块方案
    chunks: 'async', // 有效值为 `all`，`async` 和 `initial`
    minSize: 20000, // 生成 chunk 的最小体积（≈ 20kb)
    minRemainingSize: 0, // 确保拆分后剩余的最小 chunk 体积超过限制来避免大小为零的模块
    minChunks: 1, // 拆分前必须共享模块的最小 chunks 数。
    maxAsyncRequests: 30, // 最大的按需(异步)加载次数
    maxInitialRequests: 30, // 打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件）
    enforceSizeThreshold: 50000,
    cacheGroups: { // 配置提取模块的方案
      defaultVendors: {
        test: /[\/]node_modules[\/]/,
        priority: -10,
        reuseExistingChunk: true,
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true,
      },
    },
  },
},