Webpack / How to not bundle JS files in dev mode?

Question

Basically, by default, the main point of webpack is to bundle every parsed JS files into a bundle.js .

In dev mode, I would like to have access to each JS separately. I don't want them to be bundled in one file.

Is there a way to prevent webpack to concat files into bundle.js in dev mode?

I would like to see A.js , B.js , C.js when I open the source code of the page in dev mode, and not bundle.js that gathers them.

Answer 1

One thing that pops out of my head is that you can configure webpack's entry and output properties. By doing so, you are telling webpack to treat each entry separately and it will give you output files with the names of the 'key' in the entry object. See below for example:

// webpack.dev.js

entry: {
  A: 'src/js/A.js',
  B: 'src/js/B.js',
  C: 'src/js/C.js'
},

output: {
 path: 'dist',
 filename: '[name].js'
}

This will produce A.js, B.js and C.js.

More information from the documentation here: https://webpack.github.io/docs/configuration.html#entry