Learn how to use Webpack to build web apps.

Building Apps with Webpack

In this exercise, we will use Webpack to process a single JavaScript file in our project.

Big files take longer to load. However, as projects get bigger and more complex, they require a lot of code. We could try to write code using as few characters as possible, but this can make it very hard to read. Can we write code that is easy to read but fast to download?

Build tools allow us to do just that. We can improve source code readability with functions, comments, and more. Webpack will remove much of this when creating the content served to the end-user. We can write easy-to-read code, run Webpack on it, and give the processed version to users. Both versions display the same content, and the user wouldn't know the difference.

Let's practice running Webpack on a JavaScript file and check out the optimized Webpack output.

Packing One JavaScript File


Great job! You have learned to build many file types into a project using Webpack!
Let's review what you've learned so far:

* Webpack is a popular tool making web resources into an efficient bundle.
* Webpack is configured to add different file types using a series of rules in its config file.
* Webpacks adds CSS with two loaders, `css-loader` and `style-loader`. `css-loader` puts the CSS into the JavaScript. `style-loader` takes that and applies it to the HTML.
* We can use Webpack 5's asset system to include images, fonts, and text files. 
* With Webpack, we can import text and images and treat them as JavaScript objects. 
* We include fonts through CSS in Webpack.

Next, we will learn how to set up Webpack locally to build an existing project.



Building Apps with Webpack Review

In this exercise, we practice using Webpack to bundle multiple JavaScript files.

Take a look at the file structure of our project on the right by clicking on the folder icon. Our **src** directory has three JavaScript files. **greetUser.js** and **myUser.js** provide utility data and functionality to **index.js**. In a typical static web project, we would have to put all three scripts into our HTML page and include them in the right order. Managing and importing these scripts gets harder as our projects get more complex. Build tools like Webpack help make including resources easier.

Webpack will allow us to use `import` and `export` statements on all our front-end files, not just JavaScript. If you need a review of ES6 module syntax, check out the [Implementing Modules Using ES6 Syntax](https://www.codecademy.com/courses/learn-intermediate-javascript/articles/implementing-modules-using-es-6-syntax) article. When we build Webpack stitches all our files together as if we wrote them as one.

Let's practice bundling several files with Webpack!

Packing Multiple JavaScript Files

Webpack bundles the resources of a web project into a single file in order for downloading in an efficient number of requests.

It's time to practice using build tools!

We'll use one of the most popular build tools, [Webpack](https://webpack.js.org/), to bundle:

* JavaScript files
* stylesheets
* images
* fonts
* text files

While an expert might configure this all at once, we will add one type of file at a time over the course of the lesson.


Introduction to Building Apps with Webpack

In this exercise, we will set up a Webpack project starting from an empty folder.

#### Set Up **package.json**

Webpack is a Node package. To use Node packages, we need a **package.json** which holds [important project metadata](https://docs.npmjs.com/cli/v7/configuring-npm/package-json) about any Node project. We can initialize a Node project using `npm init` in the terminal to make a **package.json** file. We can use the `-y` flag to use the default values for the metadata fields:

```
npm init -y
```

#### Install Webpack and Webpack CLI

We need two packages, `webpack` and `webpack-cli`, to build our Webpack project with the command line. `webpack` contains the main functionality, but `webpack-cli` allows command-line access to Webpack. We want these tools to be developer dependencies because they will not be used when the final product is running. We use `npm install` and the `--save-dev` flag to save packages as developer dependencies.

```
npm install --save-dev webpack webpack-cli
```

**package.json** will list these packages under `devDependencies` for a local project.

#### Make an entry point

A Webpack project requires an *entry point* where it will find the main file to bundle. Webpack will throw a long error indicating a problem with `main` if there are no files at the entry point. The default Webpack entry point is **index.js** in a **src** folder, although this can be [changed](https://webpack.js.org/concepts/entry-points/). If we want to use the default entry point, we should make an **src** folder with an **index.js** inside of it.

#### Define the Build Command

A `build` command is often defined in the `scripts` section of **package.json** for running Webpack. You can find more information on the [scripts section here](https://docs.npmjs.com/cli/v7/using-npm/scripts). Using a `build` command makes the way we build the project independent of what build tools we use. We define the build command like so:

```js
"scripts": {
  "build": "webpack --watch",
},
```

The `webpack` of the command just runs Webpack, `--watch` tells Webpack to automatically look for updates to our file and rebuild if any changes occur. This will be important when we preview our site.

We run the build command in the terminal with:

```
npm run build
```

When we've set up the **package.json**, entry point, and build command, Webpack is ready to go!

Let's practice setting up Webpack!

Webpack Project Setup


In this exercise, we will introduce Webpack's rule system and practice defining a rule for dealing with **.txt** files in our project.

Webpack uses *rules* to know what to do with different file types. Webpack expects an array of `rules` in a configuration option called `module`. The syntax looks like:

```js
module.exports = 
{
  module: 
  {
    rules: []
  }
}
```

A rule has a `test` configuration option defined as a [regular expression](https://www.codecademy.com/learn/introduction-to-regular-expressions). If a file matches the regular expression, Webpack will use the rule on that file. For example, if we define `test` as `\.txt$\i`, the rule will apply to files ending in **.txt**. 

The other part of the rule needs to tell Webpack what to do with files that match the `test`. That part of the rule varies by file type.

For **.txt** files, the rule inside of `rules` would look like:

```js
rules: 
[
  {
    test: /\.txt$/i,
    type: 'asset/source'
  }
]
```

Here, `type: 'asset/source'` is telling Webpack that **.txt** files are an asset that can be added directly to the source code, not requiring much processing. Once we add a rule for a file type, we can import files of that type into our code. Here's an example with a **.txt** file:

```js
import Text from './example.txt';
document.querySelector('h1').innerHTML = Text;
```

Previewing this code replaces the content of the page `h1` element with the file content.

Let's get some practice defining Webpack rules!

Introduction to Webpack Rules


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](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export). We can define an empty one like so:

```js
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.

```js
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](https://webpack.js.org/configuration/mode/).

Let's practice making a basic `webpack.config.js`. We will get rid of that pesky warning.


Creating a Webpack Config


Let's add CSS stylesheets into our Webpack project.

The `test` configuration option for CSS follows the same structure as the **.txt** file rule:

```js
test: /\.css$/i
```
While we import **.txt** files as assets, other file types often need *loaders* to get bundled by Webpack. Instead of a `type` attribute, files that use one or several loaders require a `use` attribute.

CSS files use two loaders, `css-loader` and `style-loader`.`css-loader` takes the CSS out of a **.css** file and adds it to the JavaScript code. `style-loader` takes the output of `css-loader` and puts it in a `style` tag in the HTML.
We need both loaders and to apply `css-loader` first. We specify multiple loaders with an array, and Webpack applies them in reverse order.

The rule for CSS files looks like:

```js
{
        test: /\.css$/i,
        use: ['style-loader','css-loader']
}
```

We can add this rule anywhere within our rules array.

In a local environment, we'd also install the loaders as developer dependencies.

```
npm install --save-dev style-loader css-loader
```

We can then import CSS files directly into our JavaScript using another form of the `import` statement:

```js
import './style.css';
import Text from './example.txt';
document.querySelector('h1').innerHTML = Text;
```

When we build and start our preview server, the CSS is applied to the HTML!

Let's practice using CSS in our Webpack project!


Adding CSS to Our Builds

In this exercise, we add fonts to our project.

The font rule is similar to the image rule:

```js
{
  test: /\.ttf$/i,
  type: 'asset/resource'
}
```

The above rule would handle fonts in the **.ttf** format, but we might want to be able to use multiple font file types:

```js
{
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  type: 'asset/resource'
}
```

The above rule would support **.woff**, **.woff2**, **.eot**, **.ttf**, and **.otf** font files.

Unlike the other resources we've seen so far, font files are imported in CSS, not in JavaScript. We use a font in our CSS like so:

```css
@font-face {
  font-family: 'Roboto-Black';
  src: url('../Roboto-Black.ttf');
}

h1 {
  font-family: 'Roboto-Black';
}
```

The `url` is the location of the font file. We use `font-family` to define a name for our font that we can use later in the CSS.

When we build the project, we can see our fonts!

Let's practice adding fonts to a Webpack project.


Adding Fonts to Our Builds


Let's take a look at how images can be bundled with Webpack.

Since Webpack 5, images and fonts no longer need a loader, and can use Webpack's `asset` system. Their rules are similar to that of **.txt** files.

```js
{
  test: /\.png$/i,
  type: 'asset/resource'
}
```

Notice we use `type` with `asset/resource` rather than `asset/source`. `asset/resource` creates a file in the build and imports it into the code as a URL. You may want to [explore more about asset types](https://webpack.js.org/guides/asset-modules/). The rule above would only match with ***.png** files, but we could have it handle many image types:

```js
{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  type: 'asset/resource'
}
```

When an image rule has been defined in **webpack.config.js**, we can import images into our JavaScript as if they were code:

```js
import Square from '../square.png';
const img = 
document.createElement('img');
img.src = Square;
const body = 
document.querySelector('body');
body.appendChild(img);
```

When we build, the image is in the site!

Let's practice adding image resources to our Webpack project.


Adding Images to Our Builds


In this exercise, we will use a tool called [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) to preview our code and update it as we make changes. 

We would first install `webpack-dev-server` as a development dependency in a local environment:

```
npm install --save-dev webpack-dev-server
```

Next, we need an HTML document, and it should embed the JavaScript from our exit point:

```html
<script src="./dist/main.js"></script>
```

To use `webpack-dev-server`, we'll add `start` command to **package.json** inside of the `scripts` section.

```js
"build": "webpack --watch",
"start": "webpack serve"
```

This is building our project and then serving it to the browser.

The `build` command is going to compile our project as well as update it when we make changes.

The `serve` command is going to serve our build and refresh when the build changes.

In order to have our project update any time we make changes, we would typically run each of these commands in a separate terminal.

We would first run the `build` command in one terminal, to create the bundle and wait for updates.

```
npm run build
```

We would next launch a second terminal and run the `start` command to serve the site.

```
npm run start
```


Let's try out `webpack-dev-server` to see its preview features in action.


Viewing Our App with Webpack Dev Server

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`:

```js
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](https://nodejs.org/docs/latest-v14.x/api/path.html). We set the exit point under the `output` configuration option like so:

```js
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.
