Почему Webpack дублирует файлы, добавляя при этом hash?

Question

[Unknown]

Привет!
Не могу понять, почему Webpack дублирует мой .css файл и 2 раза дублирует мой .js бандл?
При этом в консоль выбрасывает ошибки


Мой webpack.common.js(актуален для dev и prod) config:

const path = require('path');
const WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'js/[name].js',
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.pug$/,
        use: ['html-loader', 'pug-html-loader?pretty&exports=false'],
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '/[name].[ext]',
              outputPath: 'images/',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
            },
          },
        ],
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name]/[name].[ext]',
          outputPath: 'fonts/',
          publicPath: '../fonts',
        },
      },
    ],
  },
  stats: {
    assets: false,
    colors: true,
    version: false,
    hash: true,
    timings: true,
    chunks: false,
    chunkModules: false,
  },
  plugins: [
    new WebpackNotifierPlugin({ title: 'Webpack' }),
  ],
};

Мой webpack.prod.js(настройки для prod) config:

const common = require('./webpack.common.js');
const merge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MinifyPlugin = require('babel-minify-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

const src = path.join(__dirname, '../src');

module.exports = merge(common, {
  mode: 'production',
  entry: {
    scripts: path.join(src, 'index.js'),
    styles: path.join(src, 'styles.js'),
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'less-loader'],
          publicPath: '../',
        }),
      },
    ],
  },
  plugins: [
    new UglifyJsPlugin({
      test: /\.js($|\?)/i,
    }),
    new MinifyPlugin(),
    new HtmlWebpackPlugin({
      title: 'Shri2018',
      hash: true,
      template: path.join(src, 'index.pug'),
    }),
    new ExtractTextPlugin({
      filename: '[name]/[name].css',
      disable: false,
      allChunks: true,
    }),
  ],
});

Почему Webpack лезет в мой html файл и добавляет туда что считает нужным? Как ему объяснить что он ошибается?


UPD:
Если я удалю из webpack.prod.js entry point styles.js, то Webpack будет работать корректно. НО я специально создал styles.js чтобы собрать все мои .less файлы, после билда я удаляю styles.js (

webpack --config ./webpack/webpack.prod.js && rimraf ./dist/js/styles.js

), потому что мне не нужен код который генерит Webpack (ну знаете, вебпак же генерит свой код даже если мы поместим пустой файл в entry point)