title: How to render .ejs files using webpack?
body: <p>I am having the issue with trying to use <strong><code>.ejs</code></strong> files with Webpack. I have tried numerous packages and haven't managed to figure it out. I have five files that I want to render and have a <strong><code>layout.ejs</code></strong> which acts as a base for my application. I am using <strong><code>ejs-loader</code></strong> as it is the most popular. When I run <strong><code>webpack</code></strong>, I get the following error:</p>
  
  <p><code>ERROR in Template execution failed: ReferenceError: body is not defined</code></p>
  
  <p>I am relatively new to module bundling and have tried to follow the docs as close as possible.</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const path = require('path')
  const webpack = require('webpack')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const nodeExternals = require('webpack-node-externals')
  
  const config = {
    target: 'node',
    mode: 'development',
    entry: './app.js',
    externals: [nodeExternals()],
    output: {
      path: path.join(__dirname, './dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        {
          test: /\.ejs$/,
          loader: 'ejs-loader?variable=data'
        },
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './views/layout.ejs',
        hash: true,
      }),
      new webpack.ProvidePlugin({
        _: "underscore"
      })
    ]
  }
  
  module.exports = config;
  </code></pre>
  
  <p><strong>layout.ejs</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
      crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css" /&gt;
    &lt;title&gt;MyApp&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;%- body %&gt;
    &lt;/div&gt;
  
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
      crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
      crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="../dist/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>