How to fix “Conflict: Multiple assets emit to the same filename” error in Webpack?

Question

Webpack is giving me this error for some reason:

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

Is it because of the use of "App" in the names of my files?

This my webpack.config.js file:

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]"],
      }
    ],
  },
}

What is causing this error and how can I fix it?

Answer 1

It's because u have 2 entries (app.js, index.html) that are output to the same file appN.js. try adding [name] in the filename of your output.

Another option is to remove index.html in your entry. And use copy wepack plugin to add it to your dist folder. https://github.com/kevlened/copy-webpack-plugin