0

I have a project where I'm using webpack2 and ES6 transpiled with babel. However I noticed that the resulting code from underscore-template-loader stays ES6 and is not transpiled. How do i update my webpack.config.js to transpile the resulting template result?

My current 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: [],
};

An example arrow function in entry

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

An example template:

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

From the result:

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

I have noticed when researching a possible solution that there are many template packages that might be compatible with underscore templates as well. If there are solutions using a different and compatible library I'm willing to switch.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
Sylwester
  • 47,942
  • 4
  • 47
  • 79

1 Answers1

0

You can chain loaders

For webpack 1

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

For webpack 2

{
    test: /\.html$/,
    use: [
      {
           loader: 'underscore-template-loader',
            options: {
                engine: 'underscore',
                prependFilenameComment: __dirname,
            },
      },
      {
            loader: 'babel-loader',
            options: {
                presets: [
                    'es2015',
                    'es2016',
                    'es2017',
                    'stage-3',
                ],
            }
      }
    ]
  }
Yury Tarabanko
  • 44,270
  • 9
  • 84
  • 98
  • 1
    Seems like webpack2 does babel first, then template transform so I switched the order and got `Module build failed: SyntaxError: 'with' in strict mode (4:0)` which seems like a step in the right direction. – Sylwester May 19 '17 at 15:47
  • @Sylwester, yes it is Webpack's concept: "Loaders are evaluated/executed from right to left (or from bottom to top)" And that is true, it was not very obvious for me as well :) – Andrii Danyleiko Jun 27 '21 at 16:43
  • I know that Underscore is not very actual technology, but could be useful for somebody in similar case. My final solution is (webpack5): var babelLoaderUnderscore = { loader: 'babel-loader', options: { cacheDirectory: true, presets: [ '@babel/preset-env' ], sourceType: "script" // this switch off strict mode and solve with issue } }; ... and in module.rules { test: /\.html$/, use: [babelLoaderUnderscore, 'underscore-template-loader'], }, – Andrii Danyleiko Jun 28 '21 at 10:03