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.

    1Create 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

    2Configure 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' }
    };
    };

    3Install 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": "run-s clean 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.

    4Create a JavaScript file

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

    alert('It works!');

    5Create a page

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

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

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


    Here are some follow-up guides that might be of interest: