3 Easy Steps To Add Webpack Into Jekyll

programming jekyll javascript webpack react

Looking for a quick and easy way to get a simple Webpack set up for your Jekyll project? Look no further!

Before Getting Started

This tutorial assumes the following about your Jekyll project.

• It has a assets/js directory.
• You’re using jekyll-assets to add a digest to the file name.

Step 1

Add a webpack.config.js and a src directory to your Jekyll project’s root.

Step 2

Create a package.json with the following packages. You might add them using the Yarn command yarn add -D @babel/core @babel/preset-env babel-core babel-loader webpack webpack-cli

Step 3

Add the bundled JS file to a layout or specific page.

Extra Credit

Optional but recommended.

Foreman

To make development life easier, we highly recommend adding gem "foreman" to your Gemfile and a Procfile to your project’s root.

Any changes made to your javascript files will automatically update. Start up local development servers with foreman start.

Deployment

Before building your site for deployment, add a few entries to your Jekyll project’s _config.yml exclude list.

  - webpack.config.js
  - src/
  - Procfile

Check out our other posts