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:
Webpack has been warning us that the mode isn’t set. You might have seen this in the output:
Now that we have a config file, we can set the mode.
'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'.