Javascript 如何使用带有角度+；模板缓存？

我正在学习网页包。我用Angular制作了一个应用程序，我使用templateCache在一个js文件中生成所有html视图，而不是应用程序中需要的。它很酷。但是网页包作业：

条目：{
app:[“bootstrap网页包！”/bootstrap.config.js“，”./app/app.js']，
供应商：['angular'，'bootstrap'，'angular ui路由器'，'oclazyload']
},
输出：{
path:path.join（uu dirname，“dist”），
文件名：'/bundle.js'
},
插件：[
新建webpack.optimize.commonChunkPlugin(
/*chunkName=*/“vendor”，/*filename=*/“/vendor.bundle.js”），

---

这是我的网页包配置的一部分。结果我得到了目录“dist”和“bundle.js”&&“vendor.bundle.js”以及index.html。之后我启动了服务器，我的应用程序说它无法获得视图。为什么？：（据我所知，我的所有视图都必须捆绑在一起，并且应该在“dist”中可用）目录。

我根本不使用

templateCache

。因为Angular指令也接受模板作为字符串，所以我只需要

require（）

带有字符串的模板

---

---

现在很晚了，但不妨分享一下。如果你真的想使用html片段，也许

<div ng-include="'file.tplc.html'"></div>

---

他们可能不知道^^。AngularJS 1.0有很多不必要的复杂内容。例如，如果你看不到依赖注入的好处，那么整个模块系统都是粗糙的模板加载器，因此你可以预编译模板并在运行时使其可用，而不是像这种方法那样在运行时编译模板需要。使用html加载程序不会复制html代码。该模块只包含一次。如果您对多个组件使用同一模板（无论出于何种原因），这将被复制。此外，这种方法的缺点是，如果要将现有项目迁移到webpack，则需要重写templateUrl->template的所有入口抱歉，这是不正确的。HTML源代码肯定只包含一次。如果使用代码拆分，则HTML可能包含在UDE分为几个部分，但这适用于webpack中的所有模块。仅供澄清：您的代码是通过调用“webpack”触发的，还是在启动应用程序时触发的？

require。上下文

是通过

webpack

触发的。应用程序使用内容启动后，该函数的其余部分将运行（另一个函数）由上下文函数返回。

// in your webpack.config.js
module.exports = {
    module: {
        loaders: [
            { test: /\.html$/, loaders: ["html"] }
        ]
    }
}

<div ng-include="'file.tplc.html'"></div>

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);
    })

});