在 webpack 构建之前更改 templateUrl 属性答案

【问题标题】：Change templateUrl property before webpack build在 webpack 构建之前更改 templateUrl 属性
【发布时间】：2017-07-24 09:29:55
【问题描述】：

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

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

就像 webpack 构建即将运行时一样，我想在 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']
})

【问题讨论】：

你需要这样做是 Angular 本身还是你可以使用其他语言？你的开发环境是什么（特别是操作系统）？你在使用 IDE 吗？理论上有多种可能的解决方案，但我想了解更多关于您的设置的信息，因此我可以建议一个可能适合您的解决方案。
我不确定您所说的“另一种语言”是什么意思？我使用 .NET core 作为服务器端技术，使用 angular2 作为客户端技术。除此之外，webpack 还被用于模块捆绑。我正在使用 Visual Studio 2017 和 Visual Studio 代码（用于 Angular）进行开发。
好吧，例如，可以编写一个简单的 bash 脚本或 Python 程序来解析 templateUrl 字符串并替换它，或者也可以在节点中执行。如果您使用 Angular 和 Webpack，我假设您有节点，但我不知道您是否可以访问 Python 或 bash 脚本，或者您是否出于某种原因特别想要框架内的解决方案。此外，在某些 IDE 中，例如 Atom，会有一个“查找和替换”选项，这可能适合您的目的。

标签： angular webpack webpack-html-loader

【解决方案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/。

【讨论】：