Question

我正在学习Webpack。我用Angular创建了一个App，我使用templateCache在一个js文件中生成我所有的html视图，而不是在App中生成。它很酷。但接下来的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"),

这是我的webpack配置的一部分。结果我得到目录“dist”与“bundle.js”＆amp;＆amp; “vendor.bundle.js”和index.html。之后，我启动服务器，我的应用程序说它无法获取视图。为什么？ :(据我所知，我的所有观点都必须捆绑在一起，并且应该在“dist”目录中提供。

Answer 1

我根本不使用templateCache。由于Angular指令也接受模板作为字符串，我只需require() function MyDirective() { return { restrict: "E", replace: true, template: require("./MyDirective.html") }; }的模板。

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

{{1}}

如何在Angular + templateCache中使用Webpack？

1 个答案: