Angular 8 + Webpack（SingleSpa）懒加载失败，需添加何种Loader？

你在升级到Angular 8并尝试添加基于动态import()的懒加载路由时遇到了webpack解析错误，这是因为当前配置未正确处理ES模块的动态导入语法。以下是具体的解决步骤：

1. 确认TypeScript配置 #

首先修改你的tsconfig.json，确保编译器保留动态import()语法：

{
  "compilerOptions": {
    "module": "esnext", // 关键：使用ESNext模块格式，保留动态import
    "moduleResolution": "node",
    "target": "es2015", // 至少ES2015才能支持动态import
    "lib": ["es2018", "dom"],
    // 其他原有配置...
  }
}

2. 调整Webpack输出配置 #

在webpack.config.js的output部分添加chunkFilename，用于指定懒加载chunk的文件名：

output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'release'),
  libraryTarget: 'umd',
  library: 'segmentation-root',
  chunkFilename: '[name].[hash].chunk.js' // 添加此行，支持懒加载chunk输出
},

3. 检查AngularCompilerPlugin配置 #

确保AngularCompilerPlugin的配置与Angular 8兼容：

• 开发模式下skipCodeGeneration: true（JIT模式）是允许的，但需要确保@ngtools/webpack版本与Angular 8匹配（应为8.x版本）。
• 如果版本不匹配，执行以下命令更新依赖：

npm install @ngtools/webpack@8.x --save-dev

4. 可选：添加Babel支持（当以上步骤无效时） #

如果仍存在解析问题，可以添加babel-loader来处理动态import语法：

安装依赖 #

npm install @babel/core @babel/preset-env babel-loader --save-dev

创建.babelrc配置文件 #

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      },
      "modules": false // 保留ES模块语法，让webpack处理动态import
    }]
  ]
}

修改Webpack的loader配置 #

在devTypescriptLoader和prodTypescriptLoader中添加babel-loader处理JS文件：

const devTypescriptLoader = [
  { test: /\.ts$/, loader: webpackLoader },
  { test: /\.js$/, use: ['babel-loader'] } // 添加此行
];

const prodTypescriptLoader = [
  { "test": /\.js$/, "use": [
      { "loader": "@angular-devkit/build-optimizer/webpack-loader", "options": { "sourceMap": false } },
      "babel-loader" // 添加此行
    ] },
  { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: [
      { "loader": "@angular-devkit/build-optimizer/webpack-loader", "options": { "sourceMap": false } },
      webpackLoader
    ] }
];

完成以上配置后，重新编译项目，应该就能正常处理懒加载路由了。

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