So far, we have been using Webpack without any configuration or settings. Let’s start customizing Webpack!
Webpack automatically looks for a configuration file named webpack.config.js. We define Webpack’s settings in an object defined using the module.exports
syntax. We can define an empty one like so:
module.exports = { }
Webpack has been warning us that the mode isn’t set. You might have seen this in the output:
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Now that we have a config file, we can set the mode.
module.exports = { mode: 'development' }
'development'
mode is used when we develop our app, producing a more readable version of the output. We switch to 'production'
when we have a finished version, which makes the output less readable and more compact. You can read more about Webpack’s modes here.
Let’s practice making a basic webpack.config.js
. We will get rid of that pesky warning.
Instructions
Get started by creating the config file with a module.exports
inside of it. Set module.exports
to be a JavaScript object. Click “Run” when you’re done.
Next, let’s add the mode
configuration option inside of module.exports
and set it to 'development'
. Click “Run” when done.
Now let’s run the build
command.
The warning will be gone from the output.
Open dist/main.js. Click “Run” when done looking at the file.
Note that because the mode
has been set to 'development'
, the output contains comments explaining what’s happening. These will be removed when the mode
is set to 'production'
.