is it possible for html-webpack-plugin to output an ejs file? #551

seanyu4296 · 2017-01-20T12:38:20Z

No description provided.

jantimon · 2017-01-21T23:29:41Z

Yes

MichaelJC91 · 2017-03-09T07:13:44Z

Could you elaborate on how?

jantimon · 2017-03-12T09:19:06Z

Just use a loader like the raw loader which doesn't interfere with ejs

donpinkus · 2017-05-05T23:17:46Z

@jantimon - it seems that the default loader won't work with an EJS template.

Webpack tries to interpret all the EJS template variables.

This example has a variable that is meant to be substituted by EJS, but webpack is interpreting it.

Starting "template":

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8">
  	<title>Monitor</title>
    <script>
      window.config = {
        API_URL: "<%= API_URL %>"
      }
    </script>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

When you try to run webpack:

ERROR in Template execution failed: ReferenceError: FOOBAR is not defined

jantimon · 2017-05-09T06:48:36Z

@donpinkus as written before you can use the raw-loader: https://github.com/webpack-contrib/raw-loader for the template

e.g. raw-loader!index.ejs

seanyu4296 · 2017-05-09T10:38:02Z

what i actually did is have my simple nodejs server rename the normal html file to ejs then render that

var express = require('express');
var path = require('path');
var compression = require('compression');
var ejs = require('ejs');
var fs = require('fs');

fs.rename(__dirname + '/dist/index.html', __dirname + '/dist/index.ejs', function (err) {
if (err) {
fs.stat(__dirname + '/dist/index.ejs', function (err) {
if (err) return console.warn('ERROR:' + err);
})
}
console.log("html to ejs success");
})
var app = express();

app.use(compression());
app.use(express.static('dist'));
app.set('view engine', 'ejs');
app.set('views', './dist');

aseem2625 · 2017-07-09T18:23:35Z

@seanyu4296
What you told would work. But in your case, you must have hard coded in your index.ejs like
<script src="/js/bundle.js"></script> unless you're using raw-loader

Check this

I don't know, why @jantimon suggested raw-loader. I'm using html plugin in following way,

new HTML({
	template: '!!raw-loader!src/index.ejs',
	// template: 'src/index.ejs', (doesn't work properly, hence not using)
	minify: {
		collapseWhitespace: false,
		conservativeCollapse: false
	}
}),

And raw-loader helped me in just 1 thing, which is to avoid evaluating ejs variables. But still output is in .html and not in .ejs. I need .ejs format, as it is to be consumed by SSR for dynamic html and preloaded react state.

seanyu4296 · 2017-07-10T02:51:02Z

Oh i don't use raw-loader and i don't hard code my bundle.js.
Here is my code to my index.ejs and webpack.config.prod.js

new HtmlWebpackPlugin({
			template: 'src/index.ejs',
			minify: {
				removeComments: true,
				collapseWhitespace: true,
				removeRedundantAttributes: true,
				useShortDoctype: true,
				removeEmptyAttributes: true,
				removeStyleLinkTypeAttributes: true,
				keepClosingSlash: true,
				minifyJS: true,
				minifyCSS: true,
				minifyURLs: true
			},
			inject: true,
			// Note that you can add custom options here if you need to handle other custom logic in index.html
			// To track JavaScript errors via TrackJS, sign up for a free trial at TrackJS.com and enter your token below.

			trackJSToken: trackJsToken,
			applicationName: 'app-name',
			ejsVarInject: {
				api: '<%= api %>'
			}
		})

<script type="text/javascript">
  		var api;
  	<% if (htmlWebpackPlugin.options.ejsVarInject) { %>
  		api = "<%= htmlWebpackPlugin.options.ejsVarInject["api"] %>"
		<% } %>
		var globalConfig = {api: api }
  </script>

aseem2625 · 2017-07-10T10:37:05Z

@seanyu4296

lol.. This seems to be a good hack for me.

ejsVarInject: {
	api: '<%= api %>'
}

Anyways this isn't a problem for me. But what's your output extension of .ejs file? Mine index.ejs becomes index.html which I don't want 😭 Are you renaming it in server.js to rename the file? 😞

Also, just FYI, inject is true by default

EDIT: I got the solution

lock · 2018-05-31T13:18:04Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

jantimon closed this as completed Jan 21, 2017

lock bot locked as resolved and limited conversation to collaborators May 31, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

is it possible for html-webpack-plugin to output an ejs file? #551

is it possible for html-webpack-plugin to output an ejs file? #551

seanyu4296 commented Jan 20, 2017

jantimon commented Jan 21, 2017

MichaelJC91 commented Mar 9, 2017

jantimon commented Mar 12, 2017

donpinkus commented May 5, 2017 •

edited

jantimon commented May 9, 2017 •

edited

seanyu4296 commented May 9, 2017 •

edited

aseem2625 commented Jul 9, 2017 •

edited

seanyu4296 commented Jul 10, 2017 •

edited

aseem2625 commented Jul 10, 2017 •

edited

lock bot commented May 31, 2018

is it possible for html-webpack-plugin to output an ejs file? #551

is it possible for html-webpack-plugin to output an ejs file? #551

Comments

seanyu4296 commented Jan 20, 2017

jantimon commented Jan 21, 2017

MichaelJC91 commented Mar 9, 2017

jantimon commented Mar 12, 2017

donpinkus commented May 5, 2017 • edited

jantimon commented May 9, 2017 • edited

seanyu4296 commented May 9, 2017 • edited

aseem2625 commented Jul 9, 2017 • edited

seanyu4296 commented Jul 10, 2017 • edited

aseem2625 commented Jul 10, 2017 • edited

lock bot commented May 31, 2018

donpinkus commented May 5, 2017 •

edited

jantimon commented May 9, 2017 •

edited

seanyu4296 commented May 9, 2017 •

edited

aseem2625 commented Jul 9, 2017 •

edited

seanyu4296 commented Jul 10, 2017 •

edited

aseem2625 commented Jul 10, 2017 •

edited