[英]How to use Webpack with Angular + templateCache?
I'm learning Webpack. 我正在学习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.
我用Angular创建了一个App,我使用templateCache在一个js文件中生成我所有的html视图,而不是在App中生成。 It works cool.
它很酷。 But then the Webpack job:
但接下来的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. 这是我的webpack配置的一部分。 As the result I get directory "dist" with "bundle.js" && "vendor.bundle.js" and index.html.
结果我得到目录“dist”与“bundle.js”&&“vendor.bundle.js”和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.
:(据我所知,我的所有观点必须捆绑,并应在“dist”目录中提供。
I do not use the templateCache
at all. 我根本不使用
templateCache
。 Since Angular directives also accept a template as string, I just require()
the template with the html-loader . 由于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"] }
]
}
}
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);
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.