В Webpack ошибка Multiple assets emit different content?

Question

[antonidas37]

Конфиг webpack'a такой

const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const webpack = require('webpack');
const path = require('path');
const fs = require('fs');

const  PATHS  =  {
    public:  path.resolve(__dirname,  'src'),
};

const PAGES_DIR = `${PATHS.public}/views/`;
const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'));

module.exports = {
    entry: {
        'main': PATHS.public + '/main.js',
    },
    output: {
        path: path.resolve(__dirname, '/src/dist'),
        filename: '[name].[hash:8].js',
    },

    devtool: 'source-map',

    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            },

            { test: /\.(png|jpg|gif|svg)$/, use: [
                    {
                        loader: 'url-loader',
                        options: {
                            mimetype: 'image/png',
                        },
                    },
                ]},

            {
                test: /\.scss$/i,
                use: ['style-loader', 'css-loader', 'sass-loader'],
                exclude: /node_modules/,
            },

            {
                test: /\.(woff|woff2|ttf|eot)$/,
                use: 'file-loader?name=fonts/[name].[ext]!static'
            },

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

    devServer: {
        contentBase: 'src',
        historyApiFallback: true,
        hot: true,
        port: 3000,
        watchContentBase: true,
    },

    plugins: [
        ...PAGES.map(page => new HtmlWebpackPlugin({
            template: `${PAGES_DIR}/${page}`,
            filename: `./${page.replace(/\.pug/,'.html')}`
        })),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
        }),
        new Dotenv(),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            filename: 'index.html',
            inject: 'body'
        })
    ],

    optimization: {
        minimize: true,
        splitChunks: {
            minChunks: Infinity,
            chunks: 'all'
        }
    }
}

Выдает ошибку

ERROR in Conflict: Multiple assets emit different content to the same filename index.html

webpack 5.32.0 compiled with 1 error in 6766 ms
ℹ ｢wdm｣: Failed to compile.

В чем может быть проблема?

Answer 1

[volucris1]

new HtmlWebpackPlugin({
//пути отличаются
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
        }),
        new Dotenv(),
        new HtmlWebpackPlugin({
//пути отличаются
            template: 'src/index.html',
            filename: 'index.html',
            inject: 'body'
        })

Никогда не использовал веб-пак

Answer 2

[Mariannadtd]

Я смотрю вопрос популярный, может кому поможет ответ, мне помогло:

переименовать файл index.html в index.ejs

в папке node_modules найти папку webpack, в папкe bin лежит файл webpack.js, в файле после первого комментария прописать путь к этому файлу html: { template: './src/index.ejs' }

типа того:
#!/usr/bin/env node
html: { template: './src/index.ejs' }
/**
* @param {string} command process to run
* @param {string[]} args command line arguments
* @returns {Promise} promise
*/
const runCommand = (command, args) => {
const cp = require("child_process");
return new Promise((resolve, reject) => {
const executedCommand = cp.spawn(command, args, {
stdio: "inherit",
shell: true
});

executedCommand.on("error", error => {
reject(error);
});

executedCommand.on("exit", code => {
if (code === 0) {
resolve();
} else {
reject();
}
});
});
};

но это скорее всего поможет если нет конфига для вебпака