phoenixbox/webpack_handlebars_config

## webpack_handlebars_config
// Package.json
"handlebars-loader": "^1.4.0"

// /.env
GOOGLE_MAPS_KEY=YOUR_KEY

// ENV VAR SETUP - config/index.js
// *** load the config vars from .env using 'dotenv' ***
const dotenv = require('dotenv')
dotenv.config()

export default {
  globals: {
    'process.env'  : {
      'NODE_ENV' : JSON.stringify(config.env)
    },
    '__GOOGLE_MAPS_KEY__': JSON.stringify(process.env.GOOGLE_MAPS_KEY || ''),
  }
}

// Webpack Config
webpackConfig.plugins = [
  new webpack.DefinePlugin(config.globals),
  new HtmlWebpackPlugin({
    template: '!!handlebars!src/index.hbs',
    hash     : false,
    favicon  : paths.client('static/favicon.ico'),
    filename : 'index.html',
    inject   : 'body',
    minify   : {
      collapseWhitespace : true
    }
  })
]
webpackConfig.module.loaders.push(
  {...all your other loaders}
  { test: /\.handlebars$/, loader: "handlebars-loader" }
)

// src/index.hbs example template
<!doctype html>
<html lang="en">
<head>
  <title>BoltMail</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="root" style="height: 100%"></div>
  <!-- {{maps}} references a file of that name relative to the template location (i.e. src/maps.js)-->
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key={{maps}}"></script>
</body>
</html>

// src/maps.js - is the helper function
export default () => {
  return __GOOGLE_MAPS_KEY__
}
	// Package.json
	"handlebars-loader": "^1.4.0"

	// /.env
	GOOGLE_MAPS_KEY=YOUR_KEY

	// ENV VAR SETUP - config/index.js
	// * load the config vars from .env using 'dotenv' *
	const dotenv = require('dotenv')
	dotenv.config()

	export default {
	globals: {
	'process.env' : {
	'NODE_ENV' : JSON.stringify(config.env)
	},
	'__GOOGLE_MAPS_KEY__': JSON.stringify(process.env.GOOGLE_MAPS_KEY \|\| ''),
	}
	}

	// Webpack Config
	webpackConfig.plugins = [
	new webpack.DefinePlugin(config.globals),
	new HtmlWebpackPlugin({
	template: '!!handlebars!src/index.hbs',
	hash : false,
	favicon : paths.client('static/favicon.ico'),
	filename : 'index.html',
	inject : 'body',
	minify : {
	collapseWhitespace : true
	}
	})
	]
	webpackConfig.module.loaders.push(
	{...all your other loaders}
	{ test: /\.handlebars$/, loader: "handlebars-loader" }
	)

	// src/index.hbs example template
	<!doctype html>
	<html lang="en">
	<head>
	<title>BoltMail</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<div id="root" style="height: 100%"></div>
	<!-- {{maps}} references a file of that name relative to the template location (i.e. src/maps.js)-->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key={{maps}}"></script>
	</body>
	</html>

	// src/maps.js - is the helper function
	export default () => {
	return __GOOGLE_MAPS_KEY__
	}