webpack5 + babel 兼容 IE11 浏览器

webpack 配置

module.exports = {
	entry: {
      polyfill: ['core-js/stable'], // polyfill 必须
      index: resolveFile('../src/index.tsx'),
    },
    target: ['web', 'es5'], // 必须
    output: {
      publicPath: '', // fix: Webpack5 Automatic publicPath is not supported in this browser
      devtoolModuleFilenameTemplate: 'webpack:///[resource-path]?[loaders]',
      clean: true,
      environment: { // 必须
        // The environment supports arrow functions ('() => { ... }').
        arrowFunction: false,
        // The environment supports BigInt as literal (123n).
        bigIntLiteral: false,
        // The environment supports destructuring ('{ a, b } = obj').
        destructuring: false,
        // The environment supports an async import() function to import EcmaScript modules.
        dynamicImport: false,
        // The environment supports 'for of' iteration ('for (const x of array) { ... }').
        forOf: false,
        // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
        module: false,
        // The environment supports optional chaining ('obj?.a' or 'obj?.()').
        optionalChaining: false,
        // The environment supports template literals.
        templateLiteral: false,
      },
    },
    module: {
      rules: [
        {
          test: /\.(ts|js)$/,
          include: [path.resolve('src'), path.resolve('node_modules', 'usehooks-ts')], // 有些第三方库是基于 es6 的，所以需要对第三方库进行编译
          exclude: /assets/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: [isDev && require.resolve('react-refresh/babel')].filter(Boolean),
            },
          },
        },
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: require.resolve('ts-loader'),
              options: {
                getCustomTransformers: () => ({
                  before: [isDev && ReactRefreshTypeScript()].filter(Boolean),
                }),
                transpileOnly: isDev,
              },
            },
          ],
        },
      ],
    },
    // ... 其他配置
}

babel 配置

babel.config.js 文件

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry',
        targets: {
          browsers: ['ie 11'],
        },
        corejs: {
          version: 3,
          proposals: false,
        },
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: ['@babel/plugin-transform-runtime'],
};