如何在Webpack 5中保留ts-loader并替代angular2-template-loader

当然有办法，我之前在Angular 12 + Webpack5的lerna仓库存留ts-loader的前提下，解决了angular2-template-loader的兼容问题。核心思路是用字符串替换+raw-loader模拟angular2-template-loader的内联逻辑，不用切换到@ngtools/webpack，具体步骤如下：

核心替代方案 #

angular2-template-loader的本质是把组件里的templateUrl/styleUrls替换为内联的template/styles，我们可以用string-replace-loader配合raw-loader手动实现这个逻辑：

1. 调整依赖
   移除angular2-template-loader，添加所需的替代工具：

npm uninstall angular2-template-loader
npm install --save-dev string-replace-loader raw-loader

2. 修改Webpack规则
   针对.ts文件，在ts-loader之前添加字符串替换规则，同时配置模板/样式文件的加载逻辑：

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          // 保留ts-loader，开启transpileOnly配合fork-ts-checker做类型检查
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              experimentalWatchApi: true,
              compilerOptions: {
                module: 'es2020' // 适配Webpack5的tree-shaking
              }
            }
          },
          // 替换templateUrl为内联template
          {
            loader: 'string-replace-loader',
            options: {
              search: /templateUrl:\s*['"](.+)['"]/,
              replace: 'template: require($1).default',
              flags: 'g'
            }
          },
          // 替换styleUrls为内联styles
          {
            loader: 'string-replace-loader',
            options: {
              search: /styleUrls:\s*\[([^\]]+)\]/,
              replace: (match, urlsStr) => {
                const urls = urlsStr.split(',').map(url => url.trim().replace(/['"]/g, ''));
                return `styles: [${urls.map(url => `require('${url}').default`).join(',')}]`;
              },
              flags: 'g'
            }
          }
        ],
        exclude: /node_modules/
      },
      // 用raw-loader加载模板文件，转为字符串
      {
        test: /\.html$/,
        use: 'raw-loader',
        exclude: /node_modules/
      },
      // 用raw-loader加载样式文件，转为字符串（用SCSS就追加sass-loader）
      {
        test: /\.css$/,
        use: 'raw-loader',
        exclude: /node_modules/
      }
    ]
  },
  // 保留fork-ts-checker-webpack-plugin做类型检查
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: true,
      typescript: {
        configFile: './tsconfig.json'
      }
    })
  ],
  // 开启Webpack5文件系统缓存，提升重复构建速度
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  }
};

构建速度优化细节 #

你担心构建变慢？可以通过这些手段稳住甚至提速：

• 保持ts-loader的transpileOnly: true，让fork-ts-checker-webpack-plugin异步做类型检查，不阻塞编译流程
• 给ts-loader前置thread-loader，开启多线程编译：

  use: [
    'thread-loader', // 加在ts-loader最前面
    { loader: 'ts-loader', /* ...原有配置... */ },
    // ...替换loader...
  ]
  

• 确保Webpack5的缓存配置生效，重复构建直接复用缓存结果

多子项目的简化迁移 #

因为是lerna仓库，不用每个子项目都重复写配置：

1. 在根目录创建一个公共的Webpack基础配置包（比如webpack-config-base）
2. 每个子项目的Webpack配置通过require('webpack-config-base')继承，只需要覆盖子项目独有的参数（比如entry、output路径）

注意事项 #

• 如果用SCSS/Sass，把样式的loader链改成raw-loader!sass-loader，确保样式编译后转为字符串
• 检查组件里的相对路径是否正确，string-replace-loader会保留原路径，Webpack会正常解析
• Angular 11完全支持这种内联写法，效果和angular2-template-loader完全一致

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