What does the mode parameter do in the webpack.config.js file?

Question

I am working on a project using Webpack, and I happened to notice a parameter in the object called mode.

According to the documentation, it has two possible values (both are a string). One is development, and the other is production.

Below is a part of my webpack.config.js file.

module.exports = {
  mode: "development",
};

I can already infer that development will be slower, and production will be faster. However, what makes the code slower in development?

Answer 1

Below are the differences of what Webpack compiles your code to depending on your mode.

The development mode

This mode uses the eval() function to execute all of your code in a string. It does not make it smaller, except for the fact that it places all of your code on one line.

The eval() function is slower then normal JavaScript (quote from MDN below), so it is not recommended to use this in production!

From MDN:

eval() is also slower than the alternatives, since it has to invoke the JavaScript interpreter, while many other constructs are optimized by modern JS engines.

The production mode

In production mode, Webpack will properly make your code much smaller in size (without using the eval() function).

Always use this mode in production!

Answer 2

production mode used to optimize all JS files, whereas development mode keeps the JS file as it.