Handlebars.js和Webpack - 预编译模板

Question

I'm using Backbone.js , Handlebars.js and Webpack for my website. I used to use Require.js instead of Webpack . I have the following files:

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;

});

I'd like to compile all templates with Handlebars.js at start of my website. When I was using Require.js I was used to doing something like this:

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

How can I do something like that in utils.js with webpack ?

Thanks

Answer 1

你可以使用这个把手加载器的web包https://github.com/pcardune/handlebars-loader/blob/master/README.md那里给出了完整的信息，但基本上设置加载器来编译模板中的所有html文件文件夹或从.html重命名为.hbs或.handlebars然后在您的模块中简单地要求它们，它们将被编译。