title: webpack - how to inject the generated bundle filename in specific location in the body using the plugin html-webpack-plugin
body: <p>I have a webapp that is processed by webpack and produces a bundled file with a hash in the filename e.g. <code>./app.bundle.69864e89b3c785f87cc0.js</code>.<br />
  I want to populate this filename into a generated .html file, based on a template .ejs file.<br />
  I'm using the webpack plugin <code>html-webpack-plugin</code>.<br />
  I read the html-webpack-plugin documentation and several html-webpack-plugin related tutorials <strong>but it is still not clear to me, how to do it?</strong></p>
  <ul>
  <li><p>The <a href="https://medium.com/@tomaskoutsky/hey-webpack-can-you-bust-my-cache-21350f951220" rel="nofollow noreferrer">webpack cache-busting tutorial</a>
  populates the hashed filenames at the end of the body section.<br />
  But in my case I need to inject the hashed filename <code>app.bundle.69864e89b3c785f87cc0.js</code> <strong>in a specific location in the middle of the body section</strong>.</p>
  </li>
  <li><p>I read the plugin <a href="https://github.com/jantimon/html-webpack-plugin#options" rel="nofollow noreferrer">official documentation</a>
  and it is not clear to me how should I run the script <a href="https://github.com/jantimon/html-webpack-plugin/blob/main/examples/build-examples.js" rel="nofollow noreferrer">build-examples.js</a> to build all the examples, or how to build a specific example.<br />
  When trying to build a specific example, I get an error:</p>
  </li>
  </ul>
  <pre><code>mkdir -p ~/webpackRelated/
  git clone https://github.com/jantimon/html-webpack-plugin.git
  pushd ~/webpackRelated/html-webpack-plugin/examples/template-parameters/
  webpack
  
  webpack-cli] Error: Cannot find module 'lodash'
  </code></pre>
  <p>I basically want to achieve what was asked in <a href="https://github.com/jantimon/html-webpack-plugin/issues/290" rel="nofollow noreferrer">here</a>.
  I set <code>inject:false</code> according to the comment <a href="https://github.com/jantimon/html-webpack-plugin/issues/290#issuecomment-210297393" rel="nofollow noreferrer">here</a> to not generate the template.
  The comment also points to an <a href="https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html" rel="nofollow noreferrer">example template</a></p>
  <pre><code>...
  &lt;body&gt;
  &lt;% for (var chunk in htmlWebpackPlugin.files.chunks) { %&gt;
  &lt;script src=&quot;&lt;%= htmlWebpackPlugin.files.chunks[chunk].entry %&gt;&quot;&gt;&lt;/script&gt;
  &lt;% } %&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>but does not show how to set the config file.</p>
  <p>Below are my source files:</p>
  <ul>
  <li>webpack.config.take1.js - the webpack conf file</li>
  <li>index.template.ejs - the template file</li>
  <li>index.html - the final file, where I expect the hashed name app.bundle.69864e89b3c785f87cc0.js to be populated but it is not.</li>
  </ul>
  <p>I run webpack with the following command:</p>
  <pre><code>webpack --config webpack/webpack.config.take1.js 
  </code></pre>
  <p>This creates a hashed version <code>./app.bundle.69864e89b3c785f87cc0.js</code>, but I cannot find how to inject the hashed name into a specific location in the <code>index.template.ejs</code> file.</p>
  <p><strong>How could I populate the generated hashed bundled filename, into an existing template?</strong>
  Can someone provide an example of the template, and the webpack config file?</p>
  <p>Thanks,</p>
  <p>Avner</p>
  <hr />
  <p>The webpack config file - webpack.config.take1.js</p>
  <pre><code>cat webpack.config.take1.js
  const webpack = require('../webClient/node_modules/webpack')
  var path = require('path');
  const HtmlWebpackPlugin = require('../webClient/node_modules/html-webpack-plugin')
  
  module.exports = {
      mode: 'development',
      context: path.resolve('js/'),
      entry: {
          app: './main.js',
          css: &quot;../../css/style.css&quot;,
      },
      devServer: {
          contentBase: 'public'
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  loader: 'babel-loader',
                  options: {
                      presets: [&quot;@babel/preset-env&quot;]
                  }                
              },
              {
                  test: /\.css$/,
                  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
              }
          ]    
      },
      plugins: [
          new HtmlWebpackPlugin({
              filename: './index.html',
              template: './index.template.ejs',
              templateParameters: {
                  content1: 'foo1',
                  content2: 'foo2',
              },
              inject: false,
              chunks: ['output.chunkFilename'],
          })
      ],
      output: {
          path: path.resolve('build/bundles_prod'),
          filename: &quot;./[name].bundle.[chunkhash].js&quot; ,
          chunkFilename: &quot;[name].[chunkhash].js&quot;,
          publicPath: 'build',
          // library: &quot;lib1&quot;,
          // libraryTarget: &quot;umd&quot;,
      }
  };
  </code></pre>
  <p>The template file - index.template.ejs</p>
  <pre><code>cat index.template.ejs
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
  ...
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/V1/css/style.css&quot;&gt;
  ...
      &lt;/head&gt;
      &lt;body&gt;
  ...
         {% if flask_env == &quot;development&quot; %}
  ...
         &lt;p&gt;&lt;%= content1 %&gt;&lt;/p&gt;
         &lt;% for (var chunk in htmlWebpackPlugin.chunks) { %&gt;
         &lt;script src=&quot;&lt;%= htmlWebpackPlugin.chunks[chunk] %&gt;&quot;&gt;&lt;/script&gt;
         &lt;% } %&gt;
         &lt;p&gt;&lt;%= content2 %&gt;&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The populated file index.html</p>
  <pre><code>cat index.html
  &lt;p&gt;foo1&lt;/p&gt;
  
  I expected to see here, the follwoing line, but nothing shows up between foo1, and foo2
  &lt;script src=&quot;app.bundle.69864e89b3c785f87cc0.js&quot;&gt;&lt;/script&gt;
  
  &lt;p&gt;foo2&lt;/p&gt;
  </code></pre>