Conflict: Multiple assets emit to the same filename

Question

I\'m a webpack rookie who wants to learn all about it. I came across a conflict when running my webpack telling me:

ERROR in chunk html [entry] app.js Confl

Answer 1

I had the same problem, I found it was setting a static output file name that was causing my problem, in the output object try the following object.

output:{
        filename: '[name].js',
        path: __dirname + '/build',
        chunkFilename: '[id].[chunkhash].js'
    },

This makes it so that the filenames are different and it doesn't clash.

EDIT: One thing i've recently found is that you should use a hash instead of chunkhash if using HMR reloading. I haven't dug into the root of the problem but I just know that using chunkhash was breaking my webpack config

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash:8].js',
  sourceMapFilename: '[name].[hash:8].map',
  chunkFilename: '[id].[hash:8].js'
};

Should work fine with HMR then :)

EDIT July 2018:

A little more information on this.

Hash This is a hash generated every time that webpack compiles, in dev mode this is good for cache busting during development but shouldn't be used for long term caching of your files. This will overwrite the Hash on every build of your project.

Chunkhash If you use this in conjunction with a runtime chunk then you can use it for long term caching, the runtime chunk will see what's changed in your source code and update the corresponding chunks hash's. It won't update others allowing for your files to be cached.