Webpack 4 + React + @loadable/component动态导入失效问题求助

我之前在React+TypeScript+Webpack4的项目里也碰到过一模一样的问题，折腾了好一阵才搞定，给你梳理几个关键的排查点和解决方案：

1. 先把TypeScript配置改对（这是最容易踩的坑！） #

因为你用了TS，默认的TS配置可能会把动态import()语法转成Webpack识别不了的形式。打开你的tsconfig.json，确保这几个关键配置是对的：

{
  "compilerOptions": {
    "module": "ESNext", // 必须是ESNext/ES2020及以上，绝对不能用CommonJS
    "target": "ES2015", // 至少要支持ES2015才能用动态import
    "moduleResolution": "NodeNext",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

要是module设成了CommonJS，TS会直接把import()转成CommonJS的写法，Webpack根本识别不了这是要做代码分割的信号。

2. 调整Babel配置和Webpack Loader顺序 #

你的.babelrc里少了处理TS的预设，而且Loader顺序也得注意：

先更新.babelrc：

加上@babel/preset-typescript，让Babel能正确解析TS语法，同时调整插件顺序：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript" // 新增这个，专门处理TS语法
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import", // 先开启动态import语法支持
    "@loadable/babel-plugin" // 再加载loadable的插件
  ]
}

然后调整Webpack的Loader规则：

Webpack的Loader是从右到左执行的，所以ts-loader要放在babel-loader后面（也就是数组的最后一位），保证TS先被转译，再交给Babel处理：

module: {
  rules: [
    {
      test: /\.tsx?$/,
      exclude: [/node_modules/],
      use: ["babel-loader", "ts-loader"] // 顺序没错，先跑ts-loader，再跑babel-loader
      // 如果你想简化，其实可以只保留babel-loader，用@babel/preset-typescript来处理TS，这样配置更统一
    }
  ]
}

3. 给Webpack配置代码分割规则 #

Webpack4在production模式下默认会开代码分割，但如果是development模式或者你自定义了配置，得手动配置optimization.splitChunks：

optimization: {
  splitChunks: {
    chunks: "all", // 把异步和同步的chunk都分割开
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        name: "vendors" // 把第三方依赖单独打包成vendors chunk
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  },
  runtimeChunk: "single" // 可选，把runtime代码单独提出来，避免缓存失效
}

这个配置会帮你把第三方依赖和你的异步页面（比如TextDisplayPage）都拆成独立的chunk。

4. 别忘了装@loadable/webpack-plugin #

@loadable/component需要这个插件来生成chunk的映射文件，让Webpack能正确追踪和加载分割后的chunk：
先安装：

npm install @loadable/webpack-plugin --save-dev

然后在webpack.config.js里配置：

const LoadablePlugin = require('@loadable/webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new LoadablePlugin(), // 添加这个插件
    // ...你的其他插件（比如HtmlWebpackPlugin之类的）
  ]
}

5. 确认打包模式是production #

Webpack在production模式下会自动做很多优化，包括代码分割。如果是development模式，可能需要手动开启更多配置。你可以在webpack.config.js里直接设置：

module.exports = {
  mode: "production",
  // ...其他配置
}

最后测试一下 #

改完这些配置后，重新执行打包命令，去输出目录看看，应该能看到带chunk编号或者名称的独立JS文件了，比如textDisplayPage.[hash].js之类的，而不是只有一个大文件。

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