如何修复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