Webpack，html-webpack-plugin，Error：子编译失败

hjqgdpho  于 2023-10-19  发布在  Webpack
关注(0)|答案(8)|浏览(135)

我的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 _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（？），这并不能让我高兴。

webpack

8条答案

按热度按时间
zphenhs4

zphenhs41#

问题确实出在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'
})
赞(0）分享  回复(0）举报  2023-10-19
fykwrbwg

fykwrbwg2#

我不得不升级我的节点版本。那问题就解决了
升级到最新版本（Ubuntu）

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
sudo n latest

检查版本

node -v

您可能需要重新启动终端以查看最新版本。

赞(0）分享  回复(0）举报  2023-10-19
yhxst69z

yhxst69z3#

我的问题的解决方案是更新节点版本。

赞(0）分享  回复(0）举报  2023-10-19
3wabscal

3wabscal4#

对于我的情况下，我有模板文件名拼写错误。

赞(0）分享  回复(0）举报  2023-10-19
5gfr0r5j

5gfr0r5j5#

这可能不是普通的情况，但对我来说，问题是由符号**"引起的！”““在路上。在我将所有内容移动到没有**"的文件夹后！”““然后错误消失了。

赞(0）分享  回复(0）举报  2023-10-19
u5i3ibmn

u5i3ibmn6#

删除节点模块包然后运行npm安装所有包安装然后npm启动同样的问题都面临但这个过程运行解决问题所以这个解决方案是有用的

赞(0）分享  回复(0）举报  2023-10-19
vecaoik1

vecaoik17#

几分钟前我遇到了同样的问题，我切换到了一个稳定版本的node来解决它。它工作

sudo npm cache clean -f

sudo npm install -g n

sudo n stable
赞(0）分享  回复(0）举报  2023-10-19
at0kjp5o

at0kjp5o8#

简单更新的Node JS版本。和使用

npm i

这将更新您的所有库此方法适用于我你也可以尝试

赞(0）分享  回复(0）举报  2023-10-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com