Ошибка Webpack-dev-server в режиме hot: Cannot use [chunkhash] or [contenthash] for chunk '[name].[contenthash].js' (use [hash] instead)

Углубился в освоение webpack. При запуске devserver в режиме hot: true, получаю ошибку ERROR in chunk analytics [entry] [name].[contenthash].js Cannot use [chunkhash] or [contenthash] for chunk in '[name].[contenthash].js' (use [hash] instead) ERROR in chunk main [entry] main.b2409392fd22827a6b91.css Cannot use [chunkhash] or [contenthash] for chunk in '[name].[contenthash].js' (use [hash] instead). Если я пишу без contenthash, просто [name].js и [name].css, то всё работает нормально. Подскажите в чем проблема и можно ли использовать contenthash вместе с hmr при запуске deveserver? Заранее спасибо. Вот код:

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isDev = process.env.NODE_ENV === 'development';
console.log('IS DEV:', isDev);

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: {
    main: './index.js',
    analytics: './analytics.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },

  resolve: {
    extensions: ['.js', '.json', '.png'],
    alias: {
      '@models': path.resolve(__dirname, 'src/models'),
      '@': path.resolve(__dirname, 'src'),
    },
  },

  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },

  devServer: {
    port: 4200,
    hot: isDev,
  },

  plugins: [
    new HTMLWebpackPlugin({
      template: './index.html',
      favicon: './favicon.ico',
    }),

    new CleanWebpackPlugin(),

    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/favicon.ico'),
          to: path.resolve(__dirname, 'dist'),
        },
      ],
    }),

    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: isDev,
              reloadAll: true,
            },
          },
          'css-loader',
        ],
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        use: ['file-loader'],
      },

      {
        test: /\.(ttf|woff|woff2|eot|svg|otf)$/,
        use: ['file-loader'],
      },

      {
        test: /\.xml$/,
        use: ['xml-loader'],
      },

      {
        test: /\.csv$/,
        use: ['csv-loader'],
      },
    ],
  },
};

Ответы (0 шт):