javascript - Webpack，html-webpack-plugin，错误: Child compilation failed

Question

我的 webpack 配置有问题。实现 html-webpack-plugin 后我得到一个错误，生成的 index.html 中有整个错误堆栈。

错误堆栈:Html Webpack 插件:

  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:291 Compiler.[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 _combinedTickCallbackinternal/process/next_tick.js:73:7
   
next_tick.js:104 process._tickCallbackinternal/process/next_tick.js:104:9
  

My webpack configuration 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'
                }
            },
        }
    };
};

我找不到那个错误的任何来源，也许我有点累了，但我想完成它，所以我希望得到你们的帮助。

也许我应该使用一些 raw-loader 来加载 .html(？)，这并不能让我开心。

Answer 1

问题确实出在 file-loader 上，因为它只是简单地将文件复制过来。当 html-webpack-plugin 尝试写入 index.html 时，它已经被 file-loader 写入，因此导致冲突.

有多种方法可以解决该问题，具体取决于您的需求。

你可以使用 html-loader对于您的 HTML，尽管如果您希望简单地复制导入的 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 loader as a fallback .如果您不需要 .html 文件的任何加载程序，您可以完全删除该规则，它会工作得很好。这是不太可能的，否则你一开始就不会有 .html 规则，但这也意味着你可以使用 .ejs 扩展名来不应用 .html 规则，因为所有 HTML 都是有效的 EJS .您可以将 index.html 重命名为 index.ejs 并相应地更改您的插件配置:

new HtmlWebpackPlugin({
    template: 'index.ejs',
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
})