Learn

In this exercise, we will use the configuration file to change where Webpack looks for files to bundle and where it places its output.

So far, we have used Webpack’s default entry point of ./src/index.js. However, it is common for projects to have the main file stored under a different folder or a different name.

Let’s say that we wanted to write our main application code in application/home.js. We can tell Webpack that this is the main file and that it should start bundling here by defining an entry point in the config file’s JSON object at the same level as mode or module:

entry: './application/home.js'

The entry point allows us to define a path relative to where our webpack.config.js is located.

We may also want to set the name of the output file or its directory. Let’s say we want our processed JavaScript file to be in the built directory, and to be called fast.js. We can accomplish this by defining an exit point.

Unlike the entry point, the exit point requires an absolute path, which is best specified with the path Node module. We set the exit point under the output configuration option like so:

const path = require('path'); module.exports = { entry: './application/home.js', output: { filename: 'fast.js', path: path.resolve(__dirname, 'built'), }, // ... }

The name of the bundled JavaScript file is specified with filename, and its directory with path. The path.resolve() method combines the path to the current directory with the folder name we want to place the bundled code in.

Given the configuration above, running Webpack would produce a built/fast.js.

Let’s practice defining an entry and exit point.

Instructions

1.

We’ve moved the code from the last exercise into a new folder. Our main file is now uncooked.js which resides with the other JavaScript files in the ingredients directory.

First, define the new entry point inside of the config file.

2.

If we built now, the output would still be put in ./dist/main.js.

Let’s change the exit point to ./steamy/soup.js. Change the config so that Webpack produces its output in that location.

3.

Run the build command. Check that the output is being served to ./steamy/soup.js

Take this course for free

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