web-dev-qa-db-ja.com

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(?)、これは私を幸せにしません。
10

問題は実際にfile-loaderです。これは単にファイルをコピーするだけだからです。 html-webpack-pluginindex.htmlを書き込もうとする頃には、すでにfile-loaderによって書き込まれているため、競合が発生します。

ニーズに応じて、その問題を解決する方法がいくつかあります。

HTMLに html-loader を使用できますが、インポートしたHTMLを単純にコピーすることを期待している場合は、正しい選択ではありません。明確にするために、インポートされたHTMLでは、html-webpack-pluginで使用されるテンプレートを意味しません。

他のHTMLファイルにfile-loaderを使い続けたい場合は、index.htmlを除外して、html-webpack-pluginをデフォルトのローダーにフォールバックできます。 require.resolverequireと同様に機能しますが、コンテンツではなくモジュールの完全なパスを提供します。

{
    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'
})
10
Michael Jungo