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.

	var path = require("path");

	module.exports = {
	entry: "./src/index.js",
	output: {
	path: path.join(__dirname,"./assets/js/"),
	filename: "bundle.js"
	},
	module: {
	rules: [
	{
	test: /\.jsx?$/,
	exclude: /(node_modules)/,
	loader: "babel-loader",
	options: {
	presets: ['@babel/preset-env']
	}
	}
	]
	}
	};

view raw webpack.config.js hosted with ❤ by GitHub

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

	{
	"name": "name",
	"version": "1.0.0",
	"main": "index.js",
	"license": "MIT",
	"devDependencies": {
	"@babel/core": "^7.9.0",
	"@babel/preset-env": "^7.9.5",
	"babel-core": "^6.26.3",
	"babel-loader": "^8.1.0",
	"webpack": "^4.42.1",
	"webpack-cli": "^3.3.11"
	}
	}

view raw package.json hosted with ❤ by GitHub

Step 3

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

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="{{ "/assets/styles.css" \| relative_url }}">
	{% asset bundle %}
	</head>

view raw head.html hosted with ❤ by GitHub

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.

	jekyll: bundle exec jekyll s
	webpack: webpack -w

view raw Procfile hosted with ❤ by GitHub

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