Content Hashes, ExtractTextPlugin and HtmlWebpackPlugin

I think I'll start with my webpack config.

const webpack = require('webpack');
const path = require('path');

/**
 * Environment
 */
const nodeEnv = process.env.NODE_ENV || 'development';
const isProduction = nodeEnv === 'production';
const isDevelopment = !isProduction;

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const sourcePath = path.join(__dirname, 'assets');
const buildPath = path.join(__dirname, 'dist');

const extractSass = new ExtractTextPlugin({
  filename: '[name].[contenthash].css',
  disable: isDevelopment
});

/**
 * Plugins
 */
const plugins = [
  new HtmlWebpackPlugin({
    template: path.join(sourcePath, 'index.html'),
  }),
  extractSass
];

if (isProduction) {
} else {
  plugins.concat([
    new webpack.HotModuleReplacementPlugin(),
  ]);
}

module.exports = {
  entry: ['./assets/app.js', './assets/app.scss'],
  devtool: isProduction ? 'eval' : 'source-map',
  plugins: plugins,
  module: {
    rules: [{
      test: /\.scss$/,
      use: extractSass.extract({
        use: [{
          loader: "css-loader"
        }, {
          loader: "sass-loader"
        }],
        // use style-loader in development
        fallback: "style-loader"
      })
    }]
  },
  output: {
    filename: 'bundle.js',
    path: buildPath
  },
  devServer: {
    contentBase: buildPath,
    port: 9000
  }
};

      

        
        
        
      

    

This all works great when running on a webpack dev server, but I'm trying to figure out how it fits together in a production environment.

As you can see, according to the sass-loader documentation, I create a file named [name].[contenthash].css

if the parameter is NODE_ENV

set to production

. I like the idea of ​​serving files based on a hash of the content because I love integrity.

The difficulty I'm running into is figuring out how I can pass this filename, this hash of content, into the index.html template I'm creating so that I can have <link>

a stylesheet.

• Is this a server thing?
• Is there a way to pass this filename into the HTML template to production?
• Is it intentional to do this manually or by script?

I just don't understand how these two components came together to create a publish assembly. HtmlWebpackPlugin

created .html in the output directory, but obviously it doesn't have an innate understanding of where to find it.