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變量

回答

相關問題