Webpackを持つハンドルバーは、HTMLをレンダリングする代わりにJavaScriptコードを返します

Question

基本的なLaravelプロジェクト、Todoアプリケーションがあります。資産をコンパイルするためにLaravel Elixirを使用しています。Webpackの資産をコンパイルするためにhandlebars-loaderを使用しています。 。ここで

は私のgulpfile.jsです：

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


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

そして、私はhandlebars-loader

をロードしたいので、私はここに私のwebpack.config.jsだ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をしました。

これは誰かを助けてくれると思っていますが、私はこの混乱の原因を正確にはわかりませんが、とにかくそれを修正しました。