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
servescript is what you'll use in development mode to preview your site. - The
buildscript is for generating production builds. - The
cleanscript deletes the_sitefolder 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">
<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 →
Originally posted in the StaticKit guides
Top comments (0)