Webpack5+TS-Babel打包兼容IE11：动态导入失效，require可用

问题场景 #

• 库需导入Webpack支持的外部模块，整体构建在IE11可正常运行，core-js已按需引入
• 使用import()动态导入时，IE11下构建与运行均失败；改用require()可正常运行，但require()不支持魔法注释，且会出现动态路径警告
• 此前相同配置下动态导入可用，现排查遗漏配置点

相关配置文件 #

tsconfig.json #

{
  "compilerOptions": {
    //   "sourceMap": true,
      "target": "ESNext",
      "module": "ESNext",
      "lib": [
          "es2017",
          "dom"
      ],
      "noImplicitUseStrict": true,
      "skipLibCheck": true,
      "moduleResolution": "node",
      "importHelpers": true,
      "isolatedModules": false,
      "allowJs": true,
      "baseUrl": "./",
      "allowSyntheticDefaultImports": true
  },
  "include": [
      "**/*.ts"
  ]
}

webpack.config.js #

const path = require('path');

module.exports =  
{
  entry: './src/index.ts',

  devtool: "eval-source-map",
  output: {
      publicPath: '',
      path: path.resolve(__dirname, 'dist'),
      filename: 'lib.js',
      library: 'myLib'
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        }
      ]
    },
    devServer: {
      static: {
        directory: path.join(__dirname, 'public')
      },
      compress: true,
      port: 9000
    },
  
    resolve: {
      extensions: ['.tsx', '.ts', '.js']
    }
  }

babel.config.js #

module.exports = {
      presets: [
      [
        "@babel/preset-env",
        {

          "useBuiltIns": "usage",
          "corejs": {
            "version": 3
          },
          "debug": true
        }
      ],
      ["@babel/preset-typescript"]
    ]
  }

.browserlistrc #

ie >= 11

index.ts核心代码 #

const dynamicModule = 'pathtomydynamic';
import(/* webpackIgnore: true */ dynamicModule); // IE11下失效
require(/* webpackIgnore: true */ dynamicModule); // IE11下正常，但不支持魔法注释

排查方向与解决方法 #

1. 补充动态import依赖的Promise polyfill
   IE11原生不支持Promise，而动态import语法依赖Promise实现。虽然useBuiltIns: usage会按需注入polyfill，但如果代码中没有显式使用Promise，babel可能不会自动引入。可在入口文件手动添加import 'core-js/es/promise';，或查看babel的debug日志，确认Promise polyfill是否被正确注入。

2. 指定Webpack输出目标兼容IE11
   在webpack.config.js中添加target: ['web', 'es5']，明确要求Webpack将所有代码转译为ES5兼容版本，包括动态import生成的Promise相关逻辑，避免遗留IE11无法识别的语法。

3. 调整TypeScript的module配置
   tsconfig中module: ESNext会保留ES模块语法，可能导致Webpack处理动态import时，生成未完全转译的代码。可尝试将module改为ES2015或CommonJS，配合babel完成最终转译，确保动态import语法被处理为IE11可执行的代码。

4. 检查webpackIgnore注释的影响
   使用/* webpackIgnore: true */时，Webpack会跳过对该动态import的打包处理，直接保留原生import()语法。此时需确保babel能识别并转译该语法，可手动添加@babel/plugin-syntax-dynamic-import插件（部分旧版preset-env可能未内置），确保动态import被转译为兼容代码。

5. 排查依赖版本兼容性
   检查Webpack、babel-loader、@babel/preset-env的版本是否有更新，部分新版本可能调整了IE11兼容逻辑。比如Webpack 5对IE11的支持需要额外配置，若此前使用Webpack 4升级后，可能缺失必要的polyfill或配置项。

内容的提问来源于stack exchange，提问作者Ricardo Silva