title: How do I get webpack chunk hash during build?
body: <p>How can I string replace a variable in my HTML template that points to the current chunk hash?</p>
  
  <p>My HTML template looks like this:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link href="$css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Hello World&lt;/h1&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm trying to get it to build like this:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link href="app.c824da43.css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Hello World&lt;/h1&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried using string replace with <code>[name].[chunkhash:8].css</code> but that renders as literally:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link href="[name].[chunkhash:8].css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Hello World&lt;/h1&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My project:</p>
  
  <pre><code>.
  ├── dist
  │   ├── app.c824da43.css
  │   └── index.html
  ├── html
  │   └── index.html
  ├── package.json
  ├── sass
  │   └── main.scss
  └── webpack.config.js
  </code></pre>
  
  <p>My <code>webpack.config.js</code></p>
  
  <pre><code>var webpack = require('webpack');
  var outdir = __dirname + '/dist';
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  
  module.exports = {
      entry: {
          app: [
              './sass/main.scss',
              './html/index.html',
          ]
      },
      output: {
          path: outdir,
          filename: '[name].[chunkhash:8].js'
      },
      module: {
          rules: [
              {
                  test: /\.s[ac]ss$/,
                  use: ExtractTextPlugin.extract({
                      use: ['css-loader', 'sass-loader']
                  })
              },
              {
                  test: /\.html$/,
                  use: [
                      {
                          loader: "file-loader",
                          options: {
                              name: "/[name].[ext]",
                          },
                      },
                      {
                          loader: 'string-replace-loader',
                          query: {
                              search: /\$css/,
                  // What do I need to put here?
                              replace: '/[name].[chunkhash:8].css'
                          }
                      },
                      {
                          loader: "extract-loader",
                      },
                      {
                          loader: 'html-loader',
                          options: {
                              minimize: true,
                              removeComments: true,
                              collapseWhitespace: true
                          }
                      }
                  ]
              }
          ]
      },
      plugins: [
          new ExtractTextPlugin("[name].[chunkhash:8].css"),
      ]
  };
  </code></pre>
  
  <p>My <code>package.json</code></p>
  
  <pre><code>{
    "devDependencies": {
      "css-loader": "^0.28.4",
      "extract-loader": "^0.1.0",
      "extract-text-webpack-plugin": "^2.1.0",
      "file-loader": "^0.11.1",
      "html-loader": "^0.4.5",
      "node-sass": "^4.5.3",
      "sass-loader": "^6.0.5",
      "string-replace-loader": "^1.2.0",
      "webpack": "^2.6.1"
    }
  }
  </code></pre>
  
  <p><a href="https://github.com/scratchers/webpack-chunk-hash" rel="nofollow noreferrer">Demo with solution</a></p>