Lesson Weekend

Before we get started with configuring webpack, let's take a look at our shape tracker application in GitHub so far. It should have our basic project files (no environment added yet) as well as a .gitignore file and a package.json file. If you have a local copy of the project, go ahead and delete the local version and clone it back down from GitHub. You'll see that node_modules is gone - that's expected since we didn't push it to GitHub. Now run $ npm install. npm will automatically recreate node_modules and reinstall webpack and the dependencies we need. As we've mentioned before, we could now take this package.json and drop it into any project. We don't need to recreate our package.json file from scratch.

Now let's move on to configuring webpack. Remember that scripts field in our package.json? It's time to add our first script. Since we're using webpack to build our applications, we'll write a build script. What does it mean to build our code? Well, in our case it means that webpack will take all the different files in our src directory, which are easy for humans to read and organize, and then turn them into a single file that's much leaner and more efficient for browsers.

Let's get rid of the test script for now (we'll add one back later when we start writing tests). The scripts section of our package.json file should look like this:

package.json
...

"scripts": {
    "build": "webpack"
  },
...

We can run any npm script with the $ npm run command. That means we can now type npm run build and webpack will try to build our project. However, as of now, if we type in npm run build, we'll get an error. Don't worry about resolving this error yet. We still need to set up a configuration file for webpack.

Configuring webpack

Next, we need to set up a configuration file for webpack. This file should go in the top level of our project directory. In order for webpack to find this configuration file, it must be named webpack.config.js. Let's create it now:

webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

This is a very basic configuration. The syntax may seem confusing at first, but we can break this down a bit. For instance, we can see that module.exports is a property that holds an object with key-value pairs. When we come across code that looks different, don't forget that we can always apply our basic understanding of JavaScript to make it a bit less overwhelming.

Let's go over the main points here:

  1. Anything webpack requires to run goes at the top of our configuration file. For now, we only have require('path'), which we add to configure the path where our output files will be saved. We save this in a const variable. We'll soon be adding more require statements. We will cover require statements further in the next lesson.

  2. We specify an entry point. This is the JS file where webpack will enter our application and then use a dependency graph to load all other required JS files. That just means it's going to gather all the files that our entry point depends on, then gather all the files that those files depend on, and so on - until all the dependencies have been gathered. As we can see, webpack will enter through the file where we store our user interface logic: './src/main.js'.

  3. We also specify an output. This is where all our code will go after it's processed. Remember how we mentioned that webpack would automatically create our bundle.js file and store it in the dist folder? Well, this is where we are instructing webpack to do that. Every time we run $ npm run build, webpack will follow our instructions and recreate the bundle.js file.

Note that we only have access to path because we required it at the top of our configuration file.

In short, the instructions above tell webpack to go into our entry point file src/main.js, gather all its dependencies (and its dependencies' dependencies...), "webpackify" them (concatenate them into one file), call the concatenated file bundle.js and store them in the dist directory.

Now that we have a very basic configuration file in place, we're almost ready to process and concatenate some JavaScript code. We will still get an error message if we try to build our project, though. We need to learn about import and export statements before we resolve this error.

Lesson 10 of 48
Last updated more than 3 months ago.