在 webpack 构建之前更改 templateUrl 属性

Question

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

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

像webpack build即将运行的时候，我想在html url之前追加一个目录名。这将允许我针对不同的模板编译 angular 应用程序。

示例：

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

在开始构建 web pack 之前，我想在 url 之前附加目录名称，例如

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

Answer 1

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

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

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

在 webpack 构建之前更改 templateUrl 属性

Change templateUrl property before webpack build

angular

webpack

webpack-html-loader