CODEWITHSUNDEEP
webpackhtml-webpack-plugin
Squiggs.
Squiggs.

Reputation: 4474

Webpack HTML generate one javascript for each entry point

I'm in the process of setting up Webpack for a project, and using the HTML webpack plugin to generate HTML files.

My problem is that the HTML being generate contains all the bundles rather than specific entry points for specific HTML files. Here's my code ATM

    const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    one: './js/one.js',
    two: './js/two.js',
    three: './js/three.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].js',
  },
  module: {
        loaders: [],
        rules:[
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          },
          {
            test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/,
            use: ['url-loader?limit=100000&name=./img/[hash].[ext]'],
          }

        ]
  },
  plugins: [
  new HtmlWebpackPlugin({
    title: 'One',
    template: 'one.ejs', // Load a custom template (ejs by default see the FAQ for details)
    filename: 'one.htm'
  }),
  new HtmlWebpackPlugin({
    title: 'Two',
    template: 'two.ejs', // Load a custom template (ejs by default see the FAQ for details)
    filename: 'two.htm'
  }),
  new HtmlWebpackPlugin({
    title: 'Three',
    template: 'three.ejs', // Load a custom template (ejs by default see the FAQ for details)
    filename: 'three.htm'
  })
  ]

};

According to the Docs:

https://webpack.js.org/plugins/html-webpack-plugin/

If you have multiple webpack entry points, they will all be included with script tags in the generated HTML.

Is there a way to attach one.js to one.htm? and two only to two.htm?

Upvotes: 1

Views: 2211

Answers (2)

Squiggs.
Squiggs.

Reputation: 4474

new HtmlWebpackPlugin({
    title: 'One',
    chunks: ['one'],
    template: 'ejs-render-loader!./one', 
    filename: 'one'
}),

For anyone Googling, I've also just discovered you can use chunks to do the same thing.

Upvotes: 5

jshbrntt
jshbrntt

Reputation: 5384

Set the inject option to false in the HtmlWebpackPlugin options then in your EJS templates filter out what entries you want.

new HtmlWebpackPlugin({
  inject: false,
  title: 'One',
  template: 'one.ejs',
  filename: 'one.htm'
})

You can then use these entries to template out <script> tags for the ones you want to be included.

A template like this should do the trick, it checks the basename of the desired output file against the entries and if they match it templates out the <script> tag. The way this EJS template is written you should be able to use it as the template file for all of your HtmlWebpackPlugin options.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <%
    for (let chunk in htmlWebpackPlugin.files.chunks) {
      if (chunk === htmlWebpackPlugin.options.filename.split('.')[0]) {
  %><script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script><%
      }
    }
    %>
  </body>
</html>

This results in the following outputted file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>One</title>
  </head>
  <body>
    <script type="text/javascript" src="./dist/one.js"></script>
  </body>
</html>

Upvotes: 3

Related Questions