Learn

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

1.

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.

2.

Next, let’s add the mode configuration option inside of module.exports and set it to 'development'. Click “Run” when done.

3.

Now let’s run the build command.

The warning will be gone from the output.

4.

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'.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?