如何修復Webpack中的“沖突：多個資產發出相同的文件名”錯誤？

Question

Webpack出於某種原因給我這個錯誤：

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

是因為在我的文件名中使用了“App”嗎？

這是我的webpack.config.js文件：

const path = require('path');

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

  entry: {
    javascript: "./js/app.js",
    html: "./index.html",
  },

  output: {
    filename: "appN.js",
    path: __dirname + "/dist",
    //chunkFilename: '[id].[chunkhash].js'
  },

  resolve: {
    alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' },
    extensions: [ '*', '.js', '.jsx', '.json'],
    modules:[__dirname, './app/js', 'node_modules'],
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        loaders: ["babel-loader"],
      },
      {
        test: /\.html$/,
        loader: ["file-loader?name=[name].[ext]"],
      }
    ],
  },
}

導致此錯誤的原因是什么？如何解決？

Answer 1

這是因為你有兩個條目（app.js，index.html）輸出到同一個文件appN.js. 嘗試在輸出的文件名中添加[name]。

另一個選擇是刪除條目中的index.html。 並使用copy wepack插件將其添加到dist文件夾中。 https://github.com/kevlened/copy-webpack-plugin