如何在使用webpack和underscore-template-loader转换的模板中获取ES6

Question

我有一个项目，正在使用通过babel转译的webpack2和ES6。 但是我注意到，underscore-template-loader产生的代码仍为ES6，未进行编译。 如何更新我的webpack.config.js以转换生成的模板结果？

我当前的webpack.config.js：

const path = require('path'); 
module.exports = {
    entry: 'app',
    module: {
        loaders: [
            {
                test: /\.html$/,
                loader: 'underscore-template-loader',
                query: {
                    engine: 'underscore',
                    prependFilenameComment: __dirname,
                },
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        'es2015',
                        'es2016',
                        'es2017',
                        'stage-3',
                    ],
                },
            },
        ],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        sourceMapFilename: '[file].map',
    },
    resolve: {
        modules: [
            path.join(__dirname, 'src'),
            'node_modules',
        ],
    },
    devtool: 'source-map',
    plugins: [],
};

输入中的示例箭头功能

_.forEach([1,2,3], (e) => {console.log(e);});

示例模板：

<% _.forEach(test, (e) => { %>
  <p>From template <%- e %></p>
<% }); %>

从结果：

_.forEach(test, (e) => {         // not transpiled :( 
__p+='\n  <p>From template '+
((__t=( e ))==null?'':_.escape(__t))+
'</p>\n';
 }); 

...

_underscore2.default.forEach([1, 2, 3], function (e) { // transpiled
  console.log(e);
});

我在研究可能的解决方案时注意到，有许多模板包也可能与下划线模板兼容。 如果有使用其他兼容库的解决方案，我愿意切换。

Answer 1

您可以链式装载机

对于webpack 1

{ 
  test: /\.html$/, 
  loader: "babel?presets=[es2015]!underscore-template-loader?engine=underscore"
}

对于webpack 2

{
    test: /\.html$/,
    use: [
      {
           loader: 'underscore-template-loader',
            options: {
                engine: 'underscore',
                prependFilenameComment: __dirname,
            },
      },
      {
            loader: 'babel-loader',
            options: {
                presets: [
                    'es2015',
                    'es2016',
                    'es2017',
                    'stage-3',
                ],
            }
      }
    ]
  }