Jekyll and Webpack

Adam Jahnke

October 12, 2015

I was recently setting up a Jekyll site that had the JavaScript and CSS compiled using Webpack. The compiled bundle should be parsed by Liquid, so it needed to somehow have the YAML triple-dashes prepended to it. Luckily, there is a Webpack plugin for just such an occasion! In webpack.config.js:

var webpack = require("webpack");

module.exports = {
  plugins: [new webpack.BannerPlugin("---\n---\n\n", { raw: true })],
};

The javascript±{ raw: true } bit in the options is important, otherwise BannerPlugin will output the passed string as a comment and Liquid won't know about it.

When Jekyll picks up my built bundle to compile it into /_site, it will now have the triple-dashes prepended to the file. I use the style-loader with Webpack so that I can require styles in my JavaScript and have them written to the document <head>. So now I'll be able to use Liquid tags for things like this:

.site-header {
  background-image: url("{{ '/images/logo.jpg' | prepend: site.baseurl }}");
}

To read about the options for BannerPlugin and to see all of the available Webpack plugins, head over to the List of Plugins page in the docs.