3
.envファイルのGoogle Places APIキーをメインインデックスに読み込もうとしています。私はprocess.env.GOOGLE_PLACES_API_KEYが正しく読み込まれていることを知っています。なぜなら、私はそれをログに記録して、自分の鍵を吐き出すことができるからです。しかし、変数をDOMにレンダリングしません。EJS変数を解析していないHTML webpackプラグイン
私はほとんど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>
ちょうどこのようレンダリングされるGoogleプレイスのためのスクリプトタグ：私はしました
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&libraries=places"></script>
いくつかのことを試みました（明示的にejs-loaderを使用していましたが、これはoenを有効にしたdotenv-webpackを使用していました。 tは不要です）。前方に進むためのガイダンスは？