How to use Webpack with Angular + templateCache?

I do not use the templateCache at all. Since Angular directives also accept a template as string, I just require() the template with the html-loader.

function MyDirective() {    return {        restrict: "E",        replace: true,        template: require("./MyDirective.html")    };}

// in your webpack.config.jsmodule.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

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