angular - 在 webpack 构建之前更改 templateUrl 属性

Question

我有一个由 web pack 捆绑的 angular2 应用程序。我正在使用 html-loader 加载 html 文件。

我想问有没有一种方法可以在 webpack 构建过程开始之前更改我的模板 url？

就像 webpack 构建即将运行时一样，我想在 html url 之前附加一个目录名称。这将允许我针对不同的模板编译 Angular 应用程序。

例子：

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})

在 webpack 构建开始之前，我想在 url 之前附加目录名称，比如

@Component({
    selector: 'nav-menu',
    templateUrl: '/ThemeFolder/navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})

Answer 1

最后使用 webpack-replace 加载器进行字符串替换。在我的 webpack.common.js 中，我添加了一条规则，例如

 rules: [
          {
              test: /\.component.ts$/, loader: 'webpack-replace',
              options: {
                  search: 'default', // old directory name
                  replace: 'acme' // New directory name
              }
          }
]

请注意，您必须先安装 webpack-replace loader/.