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 Conflict: Multiple assets emit to the same filename app.js
What should I do to avoid the conflict?
This is my webpack.config.js:
module.exports = { context: __dirname + "/app", entry: { 'javascript': "./js/app.js", 'html': "./index.html", }, output: { path: __dirname + "/dist", filename: "app.js", }, resolve: { extensions: ['.js', '.jsx', '.json'] }, module: { loaders: [ { test: /.jsx?$/, exclude: /node_modules/, loaders: ["babel-loader"] }, { test: /.html$/, loader: "file-loader?name=[name].[ext]", } ] } };
Advertisement
Answer
i’m not quite familiar with your approach so I’ll show you a common way to help you out.
First of all, on your output
, you are specifying the filename
to app.js
which makes sense for me that the output will still be app.js
. If you want to make it dynamic, then just use "filename": "[name].js"
.
The [name]
part will make the filename dynamic for you. That’s the purpose of your entry
as an object. Each key will be used as a name in replacement of the [name].js
.
And second, you can use the html-webpack-plugin
. You don’t need to include it as a test
.