动态将哈希的CSS添加到html文件

Question

我有一个Webpack配置，可从我的.scss文件生成.css。

之后，我将此.css文件设置为我的.html文件

我想要实现的是使用哈希生成.css，例如：

style.808ff825cfd074555db7e0e6e5ceeef6.css

，然后自动将此哈希的.css加载到.html

我的webpack配置：

module.exports = {
  entry: [...sassFiles],
  mode: 'development',
  output: {
    path: path.resolve(mainDirectory, 'commons'),
    filename: 'hot/sassBundle.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        sideEffects: true,
        use: [
          {
            loader: 'file-loader',
            options: {
              minimize: true,
              name: '[name].css',
              outputPath: '/css',
            },
          },
          {
            loader: 'extract-loader',
          },
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: !buildMode,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: !buildMode,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: !buildMode,
              convertToAbsoluteUrls: false,
            },
          },
        ],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        loader: 'url-loader?limit=100000',
      },
    ],
  },

导入我的html：

 <link rel="stylesheet" href="{% static 'css/styles.css' %}">

问题在于散列的.css文件的名称每次都在更改，我不想在html中手动添加它。