Почему появляется ошибка "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()
}
]
}
}
