Webpack -p在我的ejs模板中禁用了es2015特性

webpack -p disables es2015 features in my ejs templates

本文关键字：es2015 特性 我的 ejs Webpack      更新时间：2023-09-26

我为我的项目设置了一个简单的webpack设置，它在前端使用ejs- template:

<ul>
  <% for (let station of stations) { %>
    <li>
      <strong><%= station.name %></strong>
      <br/>
      Coach Code: <%= station.nationalcoachcode %><br/>
      Distance:  <%= (station.distance / 1000 ).toFixed(1) %> km
    </li>
  <% } %>
</ul>

当我使用webpack-dev-server或使用webpack构建它时，这工作得很好，但是当我尝试使用webpack -p进行缩小构建时，它无法再处理for-of循环并给我以下错误:

ERROR in app.js from UglifyJs SyntaxError: Unexpected token name «station», expected punc «;» [./~/ejs-loader!./src/app/stations.tmpl.ejs:7,0]

这是我的webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require ( 'html-webpack-plugin' );
const webpack = require ( 'webpack' );
const PATHS = {
  app: path.join( __dirname , 'src' ),
  build : path.join( __dirname , 'build' )
};
module.exports = {
  entry: {
    app: PATHS.app
  },
  output: {
    path: PATHS.build,
    filename : '[name].js'
  },
  devtool: 'source-map',
  module: {
    loaders: [{
      test: /'.js$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }, {
      test: /'.ejs$/,
      loader: 'ejs-loader'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.json', 'ejs']
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(PATHS.app, 'index.ejs')
    }),
    new webpack.ProvidePlugin({
      _: "lodash"
    })
  ]
};

[edit]:我已经尝试过通过babel先运行ejs模板，但这并没有解决它

我的英语不好:(看看代码:

module: {
  preLoaders: [
    {
      test: /'.ejs$/, loader: 'ejs-compiled'
    }
  ],
  loaders: [
    {
      test: /'.e?js$/, // <-- look!
      exclude: /node_modules/,
      loader: "babel-loader",
      query: {
        presets: ['es2015']
      }
    }
  ]
},
'ejs-compiled-loader': {
  htmlmin: true,
  htmlminOptions: {
    removeComments: true
  },
  _with: false // <-- important!!!
}

在EJS

<% var {station} = locals; %>
<ul>
  <% for (let station of stations) { %>
    <li>
      <strong><%= station.name %></strong>
      <br/>
      Coach Code: <%= station.nationalcoachcode %><br/>
      Distance:  <%= (station.distance / 1000 ).toFixed(1) %> km
    </li>
  <% } %>
</ul>
相关文章：