Incorporate Webpack with Jekyll
After posting the random faces example yesterday, I decided I realized I wasn’t happy with the code. Please don’t look at it. I’ll be porting it to TypeScript, which will require that I set up a build pipeline with Webpack.
I followed the tutorial here by Alli Zadronzny:
This involves moving all of the Jekyll files into a ‘src’ directory at the project root, except for the _config.yml file. You’ll need to add the following to that that file:
destination: public
source: src
This will tell Jekyll to build the files in source, and put the output in public.
In general, this also seems to be a more sensible directory organization as I also have a Dockerfile and other build scripts at the top-level. This directory layout removes the need to ignore so many files.
Next, sprinkle JavaScript via node at the top-level. This provides TypeScript compiler. I am following the examples here: TypeScript WebPack Setup
npm install --save-dev typescript ts-loader
Here’s the webpack.config.js I’m using. I may load different bundles into each blog post, so I name the entrypoints. It starts with code in ‘/webpack/hello.ts’ and builds output to ‘src/assets/js/hello.bundle.js’. This is primitive code splitting as described in WebPack Code Splitting, but it is enough for what I need here.
const path = require('path');
module.exports = {
entry: {
index:'./webpack/entry.ts',
hello:'./webpack/hello.ts'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'src/assets/js/')
}
};
I also added a “webpack” command to my ‘package.json’ so I can build things by running:
npm run build
During development, I can run
npm run watch
Here’s the package.json
{
"name": "timestretch-blog",
"version": "1.0.0",
"description": "Timestretch Blog",
"main": "./webpack/entry.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^5.3.3",
"typescript": "^3.4.4",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0"
}
}
The text below is injected into the web page from TypeScript, built with WebPack: