Html-webpack-plugin: is it possible for html-webpack-plugin to output an ejs file?

Created on 20 Jan 2017 · 10Comments · Source: jantimon/html-webpack-plugin

Source

seanyu4296

Most helpful comment

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>

seanyu4296 on 10 Jul 2017

👍4

All 10 comments

Yes

jantimon on 22 Jan 2017

👎3

Could you elaborate on how?

MichaelJC91 on 9 Mar 2017

👍1

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

jantimon on 12 Mar 2017

@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

donpinkus on 6 May 2017

@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

jantimon on 9 May 2017

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');
```

seanyu4296 on 9 May 2017

@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.

aseem2625 on 9 Jul 2017

👍1

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>

seanyu4296 on 10 Jul 2017

👍4

@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

aseem2625 on 10 Jul 2017

👍2

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.