Change template syntax to work with dev mode as well

This commit is contained in:
Kimmo Puputti 2017-01-05 20:50:32 +02:00
parent db8cde8ce0
commit 9f5f24bfee
2 changed files with 24 additions and 8 deletions

View file

@ -2,11 +2,11 @@
<html>
<head>
<meta charset="utf-8">
%=title%
<!--!title-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
</head>
<body>
<div id="root">%=body%</div>
<div id="root"><!--!body--></div>
</body>
</html>

View file

@ -14,16 +14,32 @@ const mainJsPath = path.join(buildPath, manifest['main.js']);
const renderApp = require(mainJsPath).default;
const indexHtml = fs.readFileSync(path.join(buildPath, 'index.html'), 'utf-8');
const reNoMatch = /($^)/;
const template = _.template(indexHtml, {
// Escape variables with syntax: %-variableName%
escape: /%-([\s\S]+?)%/g,
// Interpolate variables without escaping with syntax: %=variableName%
interpolate: /%=([\s\S]+?)%/g,
// Interpolate variables in the HTML template with the following
// syntax: <!--!variableName-->
//
// This syntax is very intentional: it works as a HTML comment and
// doesn't render anything visual in the dev mode, and in the
// production mode, HtmlWebpackPlugin strips out comments using
// HTMLMinifier except those that aren't explicitly marked as custom
// comments. By default, custom comments are those that begin with a
// ! character.
//
// Note that the variables are _not_ escaped since we only inject
// HTML content.
//
// See:
// - https://github.com/ampedandwired/html-webpack-plugin
// - https://github.com/kangax/html-minifier
// - Plugin options in the production Webpack configuration file
interpolate: /<!--!([\s\S]+?)-->/g,
// Disable evaluation in the template by not matching anything
evaluate: /($^)/
// Disable evaluated and escaped variables in the template
evaluate: reNoMatch,
escape: reNoMatch,
});
function render(url, context) {