DEV Community

Derrick Reimer
Derrick Reimer

Posted on • Originally published at


How To Use Webpack in an Eleventy Project

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 Webpack in an Eleventy project.

Create an Eleventy project

Run the following commands to scaffold a new Eleventy project:

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:

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.

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

Install Webpack

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

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:

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:

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

alert('It works!');

Create a page

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

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

Then, create a src/ file that uses your base layout:

title: "Home"
layout: layouts/base.njk

# Hello world

Finally, spin up your local dev server:

npm run serve

Open 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 →

Originally posted in the StaticKit guides

Top comments (0)