Webpack, html-webpack-plugin, Error: Child compilation compiled
I have a problem with my webpack config. After implementing the html-webpack-plugin I got an error, there was all the error stack from the generated one index.html
.
Error stack: Html Webpack Plugin:
Error: Child compilation failed: Conflict: Multiple assets emit to the same filename index.html: Error: Conflict: Multiple assets emit to the same filename index.html
-
compiler.js: 76 [Pre-build] / [HTML-WebPack-plugin] /lib/compiler.js:76:16
-
Compiler.js compiler: 291. [Pre-build] / [WebPack] /lib/Compiler.js:291:10
-
Compiler.js: 494 [Pre-build] / [WebPack] /lib/Compiler.js:494:13
-
Tapable.js: 138 next [Pre-build] / [tapable] /lib/Tapable.js:138:11
-
CachePlugin.js: 62 Compiler. [Pre-build] / [WebPack] /lib/CachePlugin.js:62:5
-
Tapable.js: 142 Compiler.applyPluginsAsyncSeries [Pre-build] / [tapable] /lib/Tapable.js:142:13
-
Compiler.js: 491 [Pre-build] / [WebPack] /lib/Compiler.js:491:10
-
Tapable.js: 131 Compilation.applyPluginsAsyncSeries [Pre-build] / [tapable] /lib/Tapable.js:131:46
-
Compilation.js: 645 self.applyPluginsAsync.err [Pre-build] / [WebPack] /lib/Compilation.js:645:19
-
Tapable.js: 131 Compilation.applyPluginsAsyncSeries [Pre-build] / [tapable] /lib/Tapable.js:131:46
-
Compilation.js: 636 self.applyPluginsAsync.err [Pre-build] / [WebPack] /lib/Compilation.js:636:11
-
Tapable.js: 131 Compilation.applyPluginsAsyncSeries [Pre-build] / [tapable] /lib/Tapable.js:131:46
-
Compilation.js: 631 self.applyPluginsAsync.err [Pre-build] / [WebPack] /lib/Compilation.js:631:10
-
Tapable.js: 131 Compilation.applyPluginsAsyncSeries [Pre-build] / [tapable] /lib/Tapable.js:131:46
-
Compilation.js: 627 sealPart2 [Pre-build] / [WebPack] /lib/Compilation.js:627:9
-
Tapable.js: 131 Compilation.applyPluginsAsyncSeries [Pre-build] / [tapable] /lib/Tapable.js:131:46
-
Compilation.js: 575 Compilation.seal [Pre-build] / [WebPack] /lib/Compilation.js:575:8
-
Compiler.js: 488 [Pre-build] / [WebPack] /lib/Compiler.js:488:16
-
Tapable.js: 225 [Pre-build] / [tapable] /lib/Tapable.js:225:11
-
Compilation.js: 477 _addModuleChain [Pre-build] / [WebPack] /lib/Compilation.js:477:11
-
Compilation.js: 448 processModuleDependencies.err [Pre-build] / [WebPack] /lib/Compilation.js:448:13
-
next_tick.js: 73 _combinedTickCallback internal / process / next_tick.js: 73: 7
-
next_tick.js: 104 process._tickCallback internal / process / next_tick.js: 104: 9
My webpack config code:
var webpack = require('webpack'),
path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin'),
ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
const sourcePath = path.resolve(__dirname, './src');
const staticPath = path.resolve(__dirname, './static');
module.exports = function (env) {
const nodeEnv = env && env.prod ? 'production' : 'development';
const isProd = nodeEnv === 'production';
const postcssLoader = {
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
const plugins = [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
filename: 'vendor.bundle.js'
}),
new webpack.EnvironmentPlugin({
NODE_ENV: nodeEnv,
}),
new HtmlWebpackPlugin({
template: 'index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
];
if(isProd) {
plugins.push(
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
},
output: {
comments: false,
},
})
);
} else {
plugins.push(
new webpack.HotModuleReplacementPlugin()
);
}
return {
devtool: isProd? 'source-map' : 'eval',
context: sourcePath,
entry: {
app: './app/entry.ts',
vendor: './app/vendor.ts'
},
output: {
path: staticPath,
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.html$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
query: {
name: '[name].[ext]'
},
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
'ts-loader'
],
},
],
},
resolve: {
alias: {
Public: path.resolve(__dirname,'src/public'),
Style: path.resolve(__dirname,'src/styles')
},
extensions: ['.ts','.js', '.html'],
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath
]
},
plugins,
performance: isProd && {
maxAssetSize: 100,
maxEntrypointSize: 300,
hints: 'warning'
},
stats: {
colors: {
green: '\u001b[32m'
}
},
devServer: {
contentBase: './src',
historyApiFallback: true,
port: 3000,
compress: isProd,
inline: !isProd,
hot: !isProd,
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
color: {
green: '\u001b[32m'
}
},
}
};
};
I couldn't find the source of this error, maybe I'm a little tired, but I would like to finish it, so I hope for help.
Maybe I need to use raw-loader
for loading .html
(?), Which doesn't make me happy.
source to share
The problem is really file-loader
because it just copies the file. By the time he html-webpack-plugin
tries to write index.html
, he has already been recorded file-loader
, which leads to a conflict.
There are several ways to solve this problem depending on your needs.
You can use html-loader
for your HTML, although if you expect the imported HTML to just be copied, this is not the right choice. To be clear, with the imported HTML I do not mean the template used html-webpack-plugin
.
If you want to use file-loader
for other HTML files, you can exclude index.html
, so html-webpack-plugin
falls back to the default loader. require.resolve
works like require
but gives you the full path of the module instead of its contents.
{
test: /\.html$/,
exclude: [/node_modules/, require.resolve('./index.html')],
use: {
loader: 'file-loader',
query: {
name: '[name].[ext]'
},
},
},
When no bootloader matches the pattern, html-webpack-plugin
use the ejs
bootloader as a backup . If you don't need any kind of file downloader .html
, you can remove the rule completely and it should work fine. This is unlikely, otherwise you would not have a rule .html
, but it also means that you can use an extension .ejs
to not enforce the rule .html
, since all HTML is valid EJS . You would be renamed index.html
in index.ejs
and change the configuration of the plugin:
new HtmlWebpackPlugin({
template: 'index.ejs',
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
source to share