How To Use Webpack in an Eleventy Project
Tags: javascript, webpack, html
Published: 2020-02-10 16:22:25

Eleventy is a simple, blazing fast static site generator created by Zach Leatherman. Think of it as the modern successor to Jekyll.
In this guide, we'll walk through how to use <a href="https://webpack.js.org">Webpack</a> in an <a href="https://www.11ty.dev/">Eleventy</a> project.

## Create an Eleventy project

Run the following commands to scaffold a new Eleventy project:

```bash
mkdir my-eleventy-project
cd my-eleventy-project
npm init -y
npm install --save-dev @11ty/eleventy
```

Then, add some directories to ignore in Git:

```bash
echo "node_modules" >> .gitignore
echo "_site" >> .gitignore # the build directory
```

## Configure Eleventy

Create a `.eleventy.js` file with the following contents. This tells Eleventy to look for files in the `src` directory to build and to place them in the `_site` directory.

```js
module.exports = function(eleventyConfig) {
  return {
    dir: { input: 'src', output: '_site' }
  };
};
```

## Install Webpack

Run the following command to install Webpack and a few helper libraries:

```bash
npm install --save-dev webpack webpack-cli npm-run-all rimraf
```

Next, create a minimal `webpack.config.js` file in the root of your project:

```js
const path = require('path');

module.exports = {
  entry: './src/scripts/main.js',
  output: {
    path: path.resolve(__dirname, '_site/assets'),
    filename: 'main.js'
  }
};
```

This configuration tells Webpack to look for a `main.js` file in the `src/scripts` directory and to output it into the `_site/assets` directory.

Then, add the following scripts to your `package.json` file:

```json
{
  "scripts": {
    "clean": "rimraf _site",
    "serve:webpack": "webpack --mode development --watch",
    "serve:eleventy": "ELEVENTY_ENV=development eleventy --serve",
    "serve": "npm-run-all clean --parallel serve:*",
    "build:webpack": "webpack --mode production",
    "build:eleventy": "ELEVENTY_ENV=production eleventy",
    "build": "npm-run-all clean --parallel build:*"
  }
}
```

Here's what these scripts do:

- The `serve` script is what you'll use in development mode to preview your site.
- The `build` script is for generating production builds.
- The `clean` script deletes the `_site` folder to ensure old files don't make it into a new build.

## Create a JavaScript file

Create a `src/scripts/main.js` file with the following contents:

```js
alert('It works!');
```

## Create a page

First, create a layout file called `src/_includes/layouts/base.njk` that references your `main.js` script:

```html
<!doctype html>
<html lang="en">
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}
    <script src="/assets/main.js"></script>
  </body>
</html>
```

Then, create a `src/index.md` file that uses your base layout:

```text
---
title: Home
layout: layouts/base.njk
---

# Hello world
```

Finally, spin up your local dev server:

```bash
npm run serve
```

Open [localhost:8080](http://localhost:8080) and you should see an alert from your JavaScript bundle! Congratulations, Webpack is now integrated into your site build process 🎉

[Check out the source on GitHub →](https://github.com/statickit-projects/eleventy-webpack)

---

_Originally posted in the [StaticKit](https://statickit.com/guides/eleventy-webpack) guides_