2017-05-02 50 views
0

我們試圖構建html化妝。我們有下一個文件:無法整合Laravel Mix與下劃線模板加載器

資源/資產/ htmlSrc/example.html的

<html lang="en"> 
<body> 
    <%= "test" %> 
    @require('partial/header.html') 
    <div>Body</div> 
</body> 
</html> 

資源/資產/ htmlSrc /分/ header.html中

<div>test header</div> 

我們webpack.mix.js

const {mix} = require('laravel-mix'); 

var HtmlWebpackPlugin = require('html-webpack-plugin') 
var CleanWebpackPlugin = require('clean-webpack-plugin') 
var path = require('path') 

mix.js('resources/assets/js/app.js', 'public/js') 
    .sass('resources/assets/sass/app.scss', 'public/css') 
    .browserSync('http://myhost'); 

webpackConfig = { 
    module: { 
     loaders: [ 
      { 
       test: /\.html$/, 
       loader: 'underscore-template-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new CleanWebpackPlugin(path.join(__dirname, 'resources/assets/htmlResult')) 
    ] 
}; 

/** 
* Mackup rendering 
*/ 
webpackConfig.plugins.push(new HtmlWebpackPlugin({ 
    filename: path.join(__dirname, 'resources/assets/htmlResult/example.html'), 
    template: './resources/assets/htmlSrc/example.html' 
})); 

mix.webpackConfig(webpackConfig); 

但結果文件資源/資產/ htmlResult/example.html的:看起來不按預期:

<html lang="en"><head><link href="/css/app.css" rel="stylesheet"></head> 
<body> 
    <%= "test" %> 
    @require('partial/header.html') 
    <div>Body</div> 
<script type="text/javascript" src="/js/app.js"></script></body> 
</html> 

貌似部分loaders被跳過。哪裏不對?

回答

0

作品使用rules代替loaders

webpackConfig = { 
    module: { 
     rules: [ 
      { 
       test: /\.html$/, 
       loader: 'underscore-template-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new CleanWebpackPlugin(path.join(__dirname, 'resources/assets/htmlResult')) 
    ] 
};