javascript 如何在 Angular + templateCache 中使用 Webpack？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33300289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Webpack with Angular + templateCache?
提问by Imafost
I'm learning Webpack. I made an App with Angular and I use templateCache to generate all my html views in one js file than require in App. It works cool. But then the Webpack job:
我正在学习 Webpack。我用 Angular 制作了一个应用程序，我使用 templateCache 在一个 js 文件中生成我所有的 html 视图，而不是在 App.js 文件中需要。它很酷。然后是 Webpack 工作：
entry: {
app: ["bootstrap-webpack!./bootstrap.config.js", './app/app.js'],
vendor: ['angular', 'bootstrap', 'angular-ui-router', 'oclazyload']
},
output: {
path: path.join(__dirname, "dist"),
filename: '/bundle.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(
/* chunkName= */ "vendor", /* filename= */ "/vendor.bundle.js"),
That was the part of my webpack config. As the result I get directory "dist" with "bundle.js" && "vendor.bundle.js" and index.html. After that I start server and my App says that it can't GET views. Why? :( As I understand all my views have to be bundled and should be available in the "dist" directory.
那是我的 webpack 配置的一部分。结果我得到了带有“bundle.js”&&“vendor.bundle.js”和index.html的目录“dist”。之后我启动服务器，我的应用程序说它无法获取视图。为什么？:(据我所知，我的所有视图都必须捆绑在一起，并且应该在“dist”目录中可用。
回答by Johannes Ewald
I do not use the templateCacheat all. Since Angular directives also accept a template as string, I just require()the template with the html-loader.
我根本不使用templateCache。由于 Angular 指令也接受模板作为字符串，我只require()使用带有html-loader的模板。
function MyDirective() {
return {
restrict: "E",
replace: true,
template: require("./MyDirective.html")
};
}
// in your webpack.config.js
module.exports = {
module: {
loaders: [
{ test: /\.html$/, loaders: ["html"] }
]
}
}
回答by janbee
Its late but might as well share this. If you really want to use html fragments maybe for
它迟到了，但不妨分享一下。如果你真的想使用 html 片段也许是为了
<div ng-include="'file.tplc.html'"></div>
here is how I made it work
这是我让它工作的方式
var appMod = angular.module('app');
appMod.run(function($templateCache) {
function requireAll(requireContext) {
return requireContext.keys().map(function(val){
return {
// tpl will hold the value of your html string because thanks to wepbpack "raw-loader" **important**
tpl:requireContext(val),
//name is just the filename
name : val.split('/').pop()
}
});
}
// here "../" is my app folder root
// tplc is the naming convention of the templates
let modules = requireAll(require.context("../", true, /\.tplc\.html$/));
modules.map(function (val) {
$templateCache.put(val.name, val.tpl);
})
});
