[解決済み] コンフリクト 複数のアセットが同じファイル名で出力される。

質問

私はwebpackについて学びたい新人です。 私は私のWebpackを実行するときに私に言って競合に出くわしました。

ERROR in chunk html [entry] app.js Conflict: 複数のアセットが 同じファイル名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 を指定する場合、あなたは filename から app.js という出力になるのは納得です。 app.js . もしダイナミックにしたいのであれば、単に "filename": "[name].js" .

は [name] の部分は、あなたのためにファイル名をダイナミックにしてくれます。これは、あなたの entry をオブジェクトとして使用することです。それぞれのキーは、名前に代わって [name].js .

そして二つ目は html-webpack-plugin . として含める必要はありません。 test .