2016-07-05 79 views
1

我有我的项目一个简单的WebPack设置,其中在前端使用EJS-模板ES2015特点:的WebPack -p禁用我的EJS模板

<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得到一个精缩的构建,它不能处理换的循环了,给我以下错误:

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" 
    }) 
    ] 

}; 

[编辑]:我已经试图通过巴贝尔第一运行EJS模板,但是这并没有解决它。

回答

1

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

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> 

我希望帮助...

+0

谢谢,但这并不这个配置现在给我一个错误'ReferenceError:htmlWebpackPlugin没有定义' – HumanCatfood

+0

另外,是否有可能在.ejs文件中需要从本地而不是'station'获取'stations'? – HumanCatfood

+1

如果你禁用'with'(_with:false),那么'station'是未定义的。 'var station = locals.station' –