我的 webpack 配置有问题。实现 html-webpack-plugin 后出现错误，生成的整个错误堆栈index.html。
错误堆栈：Html Webpack 插件：
错误：子编译失败： 冲突：多个资产发射到相同的文件名 index.html： 错误：冲突：多个资产发射到相同的文件名 index.html
编译器.js:76 [预构建]/[html-webpack-plugin]/lib/compiler.js:76:16
Compiler.js:291 编译器。 [预构建]/[webpack]/lib/Compiler.js:291:10
编译器.js:494 [预构建]/[webpack]/lib/Compiler.js:494:13
Tapable.js:138 下一个 [预构建]/[tapable]/lib/Tapable.js:138:11
CachePlugin.js:62 编译器。 [预构建]/[webpack]/lib/CachePlugin.js:62:5
Tapable.js:142 Compiler.applyPluginsAsyncSeries [预构建]/[tapable]/lib/Tapable.js:142:13
编译器.js:491 [预构建]/[webpack]/lib/Compiler.js:491:10
Tapable.js:131 Compilation.applyPluginsAsyncSeries [预构建]/[tapable]/lib/Tapable.js:131:46
Compilation.js:645 self.applyPluginsAsync.err [预构建]/[webpack]/lib/Compilation.js:645:19
Tapable.js:131 Compilation.applyPluginsAsyncSeries [预构建]/[tapable]/lib/Tapable.js:131:46
Compilation.js:636 self.applyPluginsAsync.err [预构建]/[webpack]/lib/Compilation.js:636:11
Tapable.js:131 Compilation.applyPluginsAsyncSeries [预构建]/[tapable]/lib/Tapable.js:131:46
Compilation.js:631 self.applyPluginsAsync.err [预构建]/[webpack]/lib/Compilation.js:631:10
Tapable.js:131 Compilation.applyPluginsAsyncSeries [预构建]/[tapable]/lib/Tapable.js:131:46
Compilation.js:627 密封Part2 [预构建]/[webpack]/lib/Compilation.js:627:9
Tapable.js:131 Compilation.applyPluginsAsyncSeries [预构建]/[tapable]/lib/Tapable.js:131:46
Compilation.js:575 Compilation.seal [预构建]/[webpack]/lib/Compilation.js:575:8
编译器.js:488 [预构建]/[webpack]/lib/Compiler.js:488:16
Tapable.js:225 [预构建]/[tapable]/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 内部/进程/next_tick.js:73:7
next_tick.js:104 进程._tickCallback 内部/进程/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（？），这并不让我高兴。