javascript - 如何修复 Webpack 中的 "Conflict: Multiple assets emit to the same filename"错误？

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

这是因为你有 2 个条目(app.js，index.html)输出到同一个文件 appN.js。尝试在输出的文件名中添加 [name]。

另一种选择是删除条目中的 index.html。并使用复制 wepack 插件将其添加到您的 dist 文件夹中。 https://github.com/kevlened/copy-webpack-plugin