競合：複数のアセットが同じファイル名に送信されます

私はそれについてすべてを学びたいウェブパックの新人です。Webpackを実行しているときに、次のような競合が発生しました。

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js

競合を回避するにはどうすればよいですか？

これは私のwebpack.config.jsです：

module.exports = {
  context: __dirname + "/app",

  entry: {
    'javascript': "./js/app.js",
    'html': "./index.html",
  },
  output: {
    path: __dirname + "/dist",
    filename: "app.js",
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"]
      },
      {
        test: /\.html$/,
        loader: "file-loader?name=[name].[ext]",
      }
    ]
  }
};

私はあなたのアプローチにあまり詳しくないので、あなたを助けるための一般的な方法を紹介します。

まず第一にoutput、あなたは、出力がまだであることが私にとって意味のあるfilenametoapp.jsを指定していますapp.js。動的にしたい場合は、を使用してください"filename": "[name].js"。

この[name]部分により、ファイル名が動的になります。それがentryオブジェクトとしてのあなたの目的です。各キーは、の代わりに名前として使用され[name].jsます。

そして第二に、あなたはを使うことができますhtml-webpack-plugin。として含める必要はありませんtest。

同じ問題が発生しました。問題の原因となっている静的出力ファイル名を設定していることがわかりました。出力オブジェクトで次のオブジェクトを試してください。

output:{
        filename: '[name].js',
        path: __dirname + '/build',
        chunkFilename: '[id].[chunkhash].js'
    },

これにより、ファイル名が異なり、衝突しないようになります。

編集：私が最近見つけた1つのことは、HMRリロードを使用する場合は、チャンクハッシュの代わりにハッシュを使用する必要があるということです。私は問題の根本を掘り下げていませんが、chunkhashを使用するとwebpackの設定が壊れていることを知っています

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash:8].js',
  sourceMapFilename: '[name].[hash:8].map',
  chunkFilename: '[id].[hash:8].js'
};

HMRで正常に動作するはずです:)

2018年7月編集：

これについてもう少し情報。

ハッシュ これは、webpackがコンパイルされるたびに生成されるハッシュです。開発モードでは、開発中のキャッシュバスティングには適していますが、ファイルの長期キャッシュには使用しないでください。これにより、プロジェクトのすべてのビルドでハッシュが上書きされます。

チャンクハッシュ これをランタイムチャンクと組み合わせて使用​​すると、長期キャッシュに使用できます。ランタイムチャンクは、ソースコードで変更された内容を確認し、対応するチャンクハッシュを更新します。他のファイルは更新されず、ファイルをキャッシュできます。

私はまったく同じ問題を抱えていました。問題はで発生するようfile-loaderです。htmlテストを削除し、html-webpack-plugin代わりにindex.htmlファイルを生成するためにインクルードすると、エラーはなくなりました。これは私のwebpack.config.jsファイルです：

var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = { 
  entry: {
    javascript: './app/index.js',
  },  

  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },  

  module: {
    rules: [
      {   
        test: /\.jsx?$/,
        exclude: [
          path.resolve(__dirname, '/node_modules/')
        ],  
        loader: 'babel-loader'
      },  
    ]   
  },  

  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },  

  plugins: [HTMLWebpackPluginConfig]
}

html-webpack-pluginはindex.htmlファイルを生成し、バンドルされたjsファイルを自動的に挿入します。

私は同じ問題を抱えていました、そして私はこれらを文書で見つけました。

構成で複数の「チャンク」が作成される場合（複数のエントリポイントの場合や、CommonsChunkPluginなどのプラグインを使用する場合など）、置換を使用して、各ファイルに一意の名前を付ける必要があります。

• [name] チャンクの名前に置き換えられます。
• [hash] コンパイルのハッシュに置き換えられます。
• [chunkhash] チャンクのハッシュに置き換えられます。

 output: {
    path:__dirname+'/dist/js',

    //replace filename:'app.js' 
    filename:'[name].js'
}

ローカル開発環境でこのエラーが発生しました。私にとって、このエラーの解決策は、ファイルを強制的に再構築することでした。これを行うために、CSSファイルの1つに小さな変更を加えました。

ブラウザをリロードすると、エラーはなくなりました。

Karmaでe2eを実行するときのVue.jsプロジェクトでの同じエラー。このページは、静的テンプレートindex.htmlと/dist/build.jsを使用して提供されました。そして、Karmaを実行するとこのエラーが発生しました。

package.jsonを使用してKarmaを発行するコマンドは次のとおりです。

"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"

webpack.config.jsの出力構成は次のとおりです。

 module.exports = {
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
  },
  ...
 }

私の解決策：Evan Burbidgeの回答に触発されて、webpack.config.jsの最後に以下を追加しました：

if (process.env.BABEL_ENV === 'test') {
  module.exports.output.filename = '[name].[hash:8].js'
}

そして、最終的にはページ配信とe2eの両方で機能しました。

この問題を修正するために、index.htmlファイルを/publicディレクトリからに変更しました/src。（Webpack 5.1.3）