Angpack + templateCacheでWebpackを使用するには？

Question

私はWebpackを学んでいます。私はAngularでAppを作成し、templateCacheを使用して、アプリケーションに必要なものよりも1つのjsファイルですべてのHTMLビューを生成します。それはクールに動作します。しかし、ウェブパックの仕事：

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"), 

それは私のwebpack設定の一部でした。その結果、私はディレクトリ "dist"を "bundle.js" & & "vendor.bundle.js"とindex.htmlに取得します。その後、私はサーバーを起動し、私のアプリケーションはビューを取得できないと言っています。どうして？私はすべてのビューをバンドルしなければならないことを理解しているので、 "dist"ディレクトリにあるはずです。

Answer 1

私はtemplateCacheを一切使用していません。 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"] } 
     ] 
    } 
} 

Answer 2

その後半が、同様にこれを共有することがあります。あなたは本当に

ために多分HTMLフラグメントを使用したい場合ここでは3210

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

});