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.

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.


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.


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

  - webpack.config.js
  - src/
  - Procfile