One of the configuration options accepted by Webpack is mode
. It can have one of the three values.
development
production
none
Webpack generates the bundle in different ways based on the mode type. In development mode, the bundle will be more verbose with comments. In production mode, Webpack does everything to use the bundle for production. It includes minification of the bundle file and other optimizations.
Default value of
mode
isproduction
.
Setting Mode
In webpack.config.js
, we can set bundling mode as shown below.
module.exports = {
mode: "development",
};
We can also pass the mode using command line flags.
webpack --mode=development
Bundle modes
Let us create a small index.js
file under ./src
folder. Fill it with below content.
console.log("Hello world");
Now let us see, how the output bundle looks like in different modes.
Development mode
Here is the output bundle in development
mode.

As we can see, the generated bundle contains lot of comments. We can also see the console.log
statement, along with an indicator to original source file.
Production mode
Here is the generated bundle in production
mode.

Webpack does not insert anything extra in production mode, just the code that is required.
None mode
By specifying none
for mode
, we are opting out of any optimizations. In our case, the output bundle file looks like below in none
mode.
