Почему появляется ошибка "Multiple assets emit different content to the same filename"?

Есть две входных точки и два различных чанков, подключенных через HtmlWebpackPlugin. При запуске production сборки появляется по два экземпляра каждого html файла, в сумме 4, в каждом из экземпляров разный контент (в принципе и есть то, на что пожаловался вебпак), при development сборке уже ничего не собирается и появляется данная ошибка.

введите сюда описание изображения

Вот мой конфиг

const path = require('path')
const globule = require('globule')
const fs = require('fs')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const cssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

const isDev = process.env.NODE_ENV === 'development'
const isProd = !isDev
const optimization = () => {
    const config = {
        splitChunks: {
            chunks: 'all'
        }
    }

    if (isProd) {
        config.minimizer = [
            new cssMinimizerPlugin(),
            new TerserWebpackPlugin()
        ]
    }

    return config
}
const filename = ext => isDev ? `[name]${ext}` : `[name].[contenthash]${ext}`
const cssLoaders = extra => {
    const loaders = [
        MiniCssExtractPlugin.loader,
        'css-loader'
    ]

    if (extra) {
        loaders.push(extra)
    }

    return loaders
}
const babelOptions = preset => {
    const opts = {
        presets: [
            '@babel/preset-env'
        ],
        plugins: [
            '@babel/plugin-proposal-class-properties'
        ]
    }

    if (preset) {
        opts.presets.push(preset)
    }

    return opts
}
const jsLoaders = () => {
    const loaders = [{
        loader: 'babel-loader',
        options: babelOptions()
    }]

    if (isDev) {
        //loaders.push('eslint-loader')
    }

    return loaders
}
const plugins = () => {
    return [
        new HTMLWebpackPlugin({
            template: path.join(__dirname, './src/pages/app/app.pug'),
            filename: filename('.html'),
            chunks: ['main']
        }),
        new HTMLWebpackPlugin({
            template: path.join(__dirname, './src/pages/app/sign.pug'),
            filename: filename('.html'),
            chunks: ['sign']
        }),
        new MiniCssExtractPlugin({
            filename: filename('.css')
        })
    ]
}

const components = globule
    .find(["src/components/**/*.pug","!src/components/components.pug"])
    .map((path) => path.split('/').pop())
    .reduce((acc,currentItem) => acc + `include ${currentItem.replace('.pug', '')}/${currentItem}\n`, ``);

fs.writeFile("src/components/components.pug", components, (err) => {
    if (err) throw err
    console.log("Components are generated automatically");
});

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main: './app.js',
        sign: './sign.js'
    },
    output: {
        filename: filename('.js'),
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    resolve: {
        extensions: ['.js', '.json', '.png'],
        alias: {
            '@': path.resolve(__dirname, 'src'),
        }
    },
    optimization: optimization(),
    devServer: {
        port: 4200,
        hot: isDev
    },
    plugins: plugins(),
    module: {
        rules: [
            {
                test: /\.css$/,
                use: cssLoaders()
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader',
                options: {
                    pretty: isDev
                }
            },
            {
                test: /\.less$/,
                use: cssLoaders('less-loader')
            },
            {
                test: /\.s[ac]ss$/,
                use: cssLoaders('sass-loader')
            },
            {
                test: /\.(png|jpe?g|svg|gif)$/,
                type: 'asset/resource',
                generator: {
                    filename: `assets/images/${filename('[ext]')}`,
                },
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                type: 'asset/resource',
                generator: {
                    filename: `assets/fonts/${filename('[ext]')}`,
                },
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: jsLoaders()
            }
        ]
    }
}

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