我是 webpack 的新手，现在我在我的一个 Angular 项目中第一次使用它。
我想在我的 html 文件中使用 require 函数，以便像这样要求 ng-include 的模板：
<div ng-include="require(./my-template.html)"></div>
我知道有像 ng-cache 和 ngtemplate 这样的加载器，但它们不能按我需要的方式工作。有了它们，我必须首先在 js 中使用模板，然后在我的 html 文件中使用模板名称。
如何做到这一点？
【问题讨论】：
标签： javascript angularjs webpack angularjs-ng-include
你可以在 npm 上使用webpack-required-loader。
在您的应用 js 或模块 js 中添加注释：
//@require "./**/*.html"
您可以在模板中使用
<div ng-include="'my-template.html'"></div>
Ngtemplate 可以正常工作。 Ng-cache 也可以。
还请注意，ng-include 指令中不需要相对路径，因为这是通过在入口文件的头部添加 //@require 命令来处理的。
最后，请注意，您必须使用双引号和单引号才能使 ng-include 工作。所以你会做"'template-name.html'"，而不是"template-name.html"，或者'template-name.html'。
【讨论】：
另一种方法是将my-template.html 转换为angular component：
假设您使用 html-loader 加载 HTML 文件 (loaders: {test: /\.html/, loader: 'html'})，请在模块 JavaScript 文件中定义一个组件 myTemplate：
import myTemplate from './my-template.html';
angular.module(...)
.component('myTemplate', {template: myTemplate})
之后使用它：
<my-template></my-template>
【讨论】：
您可以使用 HTML loader 和 angular $templateCache 服务
angular
.module('template',[])
.run(['$templateCache', function($templateCache) {
var url = 'views/common/navigation.html';
$templateCache.put(url, require(url));
}]);
webpack 加载器配置：
{
test: /\.html$/,
loader: 'html',
query: {
root:sourceRoot
}
}
【讨论】：
我已经在https://stackoverflow.com/a/34815472/833093 上发布了这个，但是：
要启用您必须配置“relativeTo”参数，否则您的模板部分会在“/home/username/path/to/project/path/to/template/”加载（检查您的 bundle.js可能会在您的项目中泄露您的用户名）
var ngTemplateLoader = (
'ngtemplate?relativeTo=' + path.resolve(__dirname, './src/') +
'!html'
);
module.exports = {
...
module: {
loaders: [
{test: /\.html$/, loader: ngTemplateLoader},
],
},
...
}
然后在你的代码中，做一个副作用只需要：
// src/webapp/admin/js/foo.js
require('../../templates/path/to/template.html');
然后就可以加载html了：
<div ng-include src="'/webapp/templates/path/to/template.html'"</div>
【讨论】：