Webpack的Handlebars返回Javascript代碼而不是呈現HTML

Question

我有一個基本的Laravel項目，一個todo應用程序，我正在使用Laravel Elixir來編譯資產，而我正在使用Webpack的Handlebars handlebars-loader來編譯我的資產。

這是我的gulpfile.js：

const elixir = require('laravel-elixir');


elixir((mix) => {
    mix.webpack('app.js', null, null, require('./webpack.config.js'));
});

我需要webpack.config.js因為我想加載handlebars-loader

這是我的webpack.config.js：

module.exports = {
    module: {
        loaders: [
            { test: /\.handlebars$/, loader: "handlebars-loader" }
        ]
    },
};

為了使這個問題更簡單，我將把所有代碼都放在app.js中：

'use strict';

var _token = $('meta[name="csrf-token"]').attr('content');

var renderErrorsTemplate = require('./../templates/errors.handlebars');
var renderTasksTemplate  = require('./../templates/task.handlebars');

$('#taskForm').submit(function(event) {
    var form = $(this);    
    var request = $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
    });
    request.done(function(response) { 
        renderTasks(response);
    });
    request.fail(function(response) {
        renderErrors(response.responseText);
    });
    event.preventDefault();
});


function renderTasks(response) {
    var response = {task: response, token: _token};
    $('#tasks').append(renderTasksTemplate(response));
    console.log(renderTasksTemplate);
}

function renderErrors(response) {
    $('#errors').html(renderErrorsTemplate(JSON.parse(response)))
    console.log(renderErrorsTemplate(response));
}   

我正在使用require('template.js')來獲取所需的模板，不使用Laravel Elixir它可以在不使用任何框架的情況下在另一個普通應用程序上運行，但如果我在終端中運行gulp ，它會將其編譯下來，所以稍后當我使用點擊事件觸發函數時，它只返回一些Javascript代碼，而不是實際運行該Javascript代碼並呈現模板。

這是它返回的內容：

var Handlebars = require("/home/akar/Code/laravel-app/node_modules/handlebars/runtime.js"); function __default(obj) { return obj && (obj.__esModule ? obj["default"] : obj); } module.exports = (Handlebars["default"] || Handlebars).template({"1":function(container,depth0,helpers,partials,data) { return "
" + container.escapeExpression(container.lambda((depth0 != null ? depth0["0"] : depth0), depth0)) + "
\n"; },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { var stack1; return "
\n
\n" + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},depth0,{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + "
\n
"; },"useData":true});

而不是這個模板的proccesed版本：

<div class="alert alert-danger">
    <ul>
        {{#each this}}   
            <li>{{ this.[0] }}</li>
       {{/each}}
    </ul>

Answer 1

所以最后我改變了我的gulpfile.js：

const elixir = require('laravel-elixir');


elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

顯然，如果您只是自己運行mix.webpack ，它會自動檢查您目錄中的任何webpack.config.js ，然后從那里讀取配置。

我將我的webpack.config.js文件更改為：

var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    module: {   
        loaders: [
            { test: /\.js$/, loader: 'buble' },
            { test: /\.handlebars$/, loader: "handlebars-loader" }
        ]
    },
    watch: true,
};

我還刪除了node_modules並再次npm install了npm install 。

希望這有助於某人，我不知道究竟是什么導致了這個混亂，但我還是修了它。