CODEWITHSUNDEEP
javascriptwebpackejshtml-webpack-plugin
Cbas
Cbas

Reputation: 6213

Html Webpack Plugin renders JS module instead of HTML file

I'm trying to use an EJS loader and the Html Webpack Plugin to compile and output an HTML file but it keeps rendering a file like this:

module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n  </head>\n\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>\n"

Here's my webpack config:

module.exports = {
  target: 'node',
  entry: './src/server.tsx',
  output: {
    filename: 'server.js'
  },
  module: {
    rules: [
      {
        test: /\.ejs$/, 
        use: {
          loader: 'ejs-webpack-loader',
          options: {
            data: { example: 'test' }
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'output.html',
      inject: false,
      template: path.join(rootDir, '../compiler/templates/index.ejs'),
      { example: 'test' },
      minify: false
    })
  ]
}

Here's my 'index.ejs' file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include ./test.ejs %>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

And here's my 'test.ejs' file:

<meta charset="UTF-8">

I expect this to output an output.html file that looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

But instead I get this:

module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n  </head>\n\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>\n"

It looks like the ejs-webpack-loader is working and properly injects the partial, but then the HtmlWebpackPlugin is rendering JS instead of HTML.

How do I get the HtmlWebpackPlugin to render the HTML file properly?

Upvotes: 0

Views: 966

Answers (1)

felixmosh
felixmosh

Reputation: 35573

You don't need a special loader (ejs-webpack-loader) in your config, since HtmlWebpackPlugin comes with ejs support out of the box.

Just try to remove it. :]

Upvotes: 0

Related Questions