HTML webpack插件不解析EJS变量

我试图从.env文件中将我的Google Places API密钥加载到我的主索引中。我知道process.env.GOOGLE_PLACES_API_KEY正在加载正确，因为我可以控制台登录它并且吐出我的密钥。但它不会将该变量渲染到DOM中。HTML webpack插件不解析EJS变量

我几乎从不使用EJS，而Webpack一直是我让这个项目前进的最大绊脚石。似乎有很多不同的选择可以做出非常简单直接的事情。我只需要获取插入到输出HTML中的JS变量。

这里是我的WebPack配置：

// webpack.dev.config.js 
const webpack = require('webpack'); 
const path = require('path'); 
const SplitByPathPlugin = require('webpack-split-by-path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: [ 
    path.join(__dirname, 'client', 'src', 'main.js'), 
    'webpack-hot-middleware/client', 
    'webpack/hot/dev-server', 
    ], 
    devtool: 'source-map', 
    target: 'web', 
    output: { 
    path: '/', 
    publicPath: 'http://localhost:3000/', 
    filename: '[name].js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: path.join(__dirname, 'client', 'src'), 
     loaders: [ 
      'react-hot-loader', 
      'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=transform-decorators-legacy,cacheDirectory=babel_cache', 
     ], 
     exclude: /node_modules/, 
     }, 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, 
     { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, 
    ], 
    }, 
    resolve: { 
    extensions: ['.js', 'map'], 
    }, 
    plugins: [ 
    new SplitByPathPlugin([ 
     { 
     name: 'vendor', 
     path: path.join(__dirname, '..', 'node_modules'), 
     }, 
    ]), 
    new HtmlWebpackPlugin({ 
     title: 'Better Beehive Project', 
     template: 'client/index.dev.ejs', 
     inject: false, 
     appMountId: 'app', 
     filename: '../index.html', 
     placesApiKey: process.env.GOOGLE_PLACES_API_KEY, 
    }), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
};

这里是我的index.ejs

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
    <title>Better Beehive Project</title> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<% htmlWebpackPlugin.options.placesApiKey %>&libraries=places"></script> 
    </head> 
    <body> 
    <div id='app'></div> 
    <script type="text/javascript" src="manifest.js"></script> 
    <script type="text/javascript" src="main.js"></script> 
    </body> 
</html>

为谷歌刚刚地方获取呈现为这个脚本标签：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&libraries=places"></script>

我已经尝试了一些东西（明确地使用ejs-loader，我根本无法工作，使用dotenv-webpack变成了ou没有必要）。任何关于前进的指导？

来源

2017-07-17 Joshua Carlo

您没有使用正确的语法进行插值。

从EJS - Tags：

<% '的scriptlet' 标记，用于控制流，无输出

<%_ '空白啜' 的scriptlet标签，之前它

<%=输出条带的所有空格值（转义）

3210将未转义的值输出到模板中

通过使用<%您只能评估表达式，但它没有输出。您需要改用<%=。

<%= htmlWebpackPlugin.options.placesApiKey %>

来源

2017-07-17 18:25:49

HTML webpack插件不解析EJS变量

回答

相关问题