Webpack、html-webpack-plugin、エラー：子のコンパイルに失敗しました
Webpackの設定に問題があります。 html-webpack-pluginを実装した後、エラーが発生しました。生成されたindex.html。
エラースタック：Html Webpackプラグイン：
エラー：子のコンパイルに失敗しました： 競合：同じファイル名index.htmlに複数のアセットが出力されます： エラー：競合：同じファイル名index.html
compiler.js：76 [ビルド前]/[html-webpack-plugin] /lib/compiler.js:76:16
Compiler.js：291コンパイラ。 [ビルド前]/[ウェブパック] /lib/Compiler.js:291:10
Compiler.js：494 [ビルド前]/[webpack] /lib/Compiler.js:494:13
Tapable.js：138 next [ビルド前]/[タップ可能] /lib/Tapable.js:138:11
CachePlugin.js：62コンパイラ。 [ビルド前]/[webpack] /lib/CachePlugin.js:62:5
Tapable.js：142 Compiler.applyPluginsAsyncSeries [ビルド前]/[タップ可能] /lib/Tapable.js:142:13
Compiler.js：491 [ビルド前]/[webpack] /lib/Compiler.js:491:10
Tapable.js：131 Compilation.applyPluginsAsyncSeries [ビルド前]/[タップ可能] /lib/Tapable.js:131:46
Compilation.js：645 self.applyPluginsAsync.err [ビルド前]/[webpack] /lib/Compilation.js:645:19
Tapable.js：131 Compilation.applyPluginsAsyncSeries [ビルド前]/[タップ可能] /lib/Tapable.js:131:46
Compilation.js：636 self.applyPluginsAsync.err [ビルド前]/[webpack] /lib/Compilation.js:636:11
Tapable.js：131 Compilation.applyPluginsAsyncSeries [ビルド前]/[タップ可能] /lib/Tapable.js:131:46
Compilation.js：631 self.applyPluginsAsync.err [ビルド前]/[webpack] /lib/Compilation.js:631:10
Tapable.js：131 Compilation.applyPluginsAsyncSeries [ビルド前]/[タップ可能] /lib/Tapable.js:131:46
Compilation.js：627 sealPart2 [ビルド前]/[webpack] /lib/Compilation.js:627:9
Tapable.js：131 Compilation.applyPluginsAsyncSeries [ビルド前]/[タップ可能] /lib/Tapable.js:131:46
Compilation.js：575 Compilation.seal [ビルド前]/[webpack] /lib/Compilation.js:575:8
Compiler.js：488 [ビルド前]/[webpack] /lib/Compiler.js:488:16
Tapable.js：225 [ビルド前]/[タップ可能] /lib/Tapable.js:225:11
Compilation.js：477 _addModuleChain [ビルド前]/[webpack] /lib/Compilation.js:477:11
Compilation.js：448 processModuleDependencies.err [ビルド前]/[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
私のwebpack構成コード：
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'
}
},
}
};
};
私はそのエラーの原因を見つけることができませんでした、多分少し疲れているかもしれませんが、私はそれを仕上げたいと思うので、私はあなたの助けを求めています。
おそらくraw-loaderロードする.html（？）、これは私を幸せにしません。
問題は実際にfile-loaderです。これは単にファイルをコピーするだけだからです。 html-webpack-pluginがindex.htmlを書き込もうとする頃には、すでにfile-loaderによって書き込まれているため、競合が発生します。
ニーズに応じて、その問題を解決する方法がいくつかあります。
HTMLに html-loader を使用できますが、インポートしたHTMLを単純にコピーすることを期待している場合は、正しい選択ではありません。明確にするために、インポートされたHTMLでは、html-webpack-pluginで使用されるテンプレートを意味しません。
他のHTMLファイルにfile-loaderを使い続けたい場合は、index.htmlを除外して、html-webpack-pluginをデフォルトのローダーにフォールバックできます。 require.resolveはrequireと同様に機能しますが、コンテンツではなくモジュールの完全なパスを提供します。
{
test: /\.html$/,
exclude: [/node_modules/, require.resolve('./index.html')],
use: {
loader: 'file-loader',
query: {
name: '[name].[ext]'
},
},
},
テンプレートに一致するローダーがない場合、html-webpack-pluginはフォールバックとして ejsローダー を使用します。 .htmlファイル用のローダーが必要ない場合は、ルールを完全に削除することができ、正常に機能します。そうではありません。そうでない場合、最初に.htmlルールがありませんが、これは.ejsルールを適用しないように.html拡張子を使用できることも意味しますHTMLは有効です [〜＃〜] ejs [〜＃〜] 。 index.htmlの名前をindex.ejsに変更し、それに応じてプラグイン構成を変更します。
new HtmlWebpackPlugin({
template: 'index.ejs',
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})