Handlebars.js和Webpack - 預編譯模板

Question

我在我的網站上使用Backbone.js ， Handlebars.js和Webpack 。 我曾經使用Require.js而不是Webpack 。 我有以下文件：

template.js

define({
    structure:      "structure.html",
    home:           "home.html"

});

webpack.config.js

resolve: {
        extensions: ['', '.js', '.json'],

        alias: {
            root: path.resolve( __dirname ),
            "router": path.resolve( __dirname ) + "/www/js/router",
            "templates": path.resolve( __dirname ) + "/www/js/templates",
            "handlebars": path.resolve( __dirname ) + "/node_modules/handlebars/dist/handlebars",
        "templates_html": path.resolve( __dirname ) + "/www/templates"
        }    
    },

view.js

define( ['jquery', 'underscore', 'backbone', "utils" ], 
       function($, _, Backbone, Utils) {

    var View = Utils.Page.extend({

        constructorName: "View",
        id: "home",

        initialize: function() {
            this.template = Utils.templates.home; // this is what I need

        },

        render: function () {
            this.$el.html(     this.template( this.model.toJSON() )    );
            return this;
        },

    });

    return View;

});

我想在我的網站開頭用Handlebars.js編譯所有模板。 當我使用Require.js我習慣做這樣的事情：

utils.js

define( ['jquery', 'underscore', 'backbone', 'handlebars', 'templates'], 
       function($, _, Backbone, Handlebars, Templates) {

    var Utils = {
        templates: {}
    };

    for (var t in Templates) {
      Templates[t] = "text!" + Templates[t];
    }

    require(_.values(Templates), function() {

        var fragments = _.object(_.keys(Templates), arguments);

        // precompile all the fragments
        for (var t in fragments) {
          Utils.templates[t] = Handlebars.compile(fragments[t]); /* <Handlebars> */
        }

    });
    return Utils;
});

我怎樣才能做到與utils.js類似的東西webpack ？

謝謝

Answer 1

你可以使用這個把手加載器的web包https://github.com/pcardune/handlebars-loader/blob/master/README.md那里給出了完整的信息，但基本上設置加載器來編譯模板中的所有html文件文件夾或從.html重命名為.hbs或.handlebars然后在您的模塊中簡單地要求它們，它們將被編譯。