Using Webpack as browserify

My initial setup was bundling everything together into one javascript bundle, however, I wanted to lower the building time and get faster feedback loops. For this I am using shimming and EcmaScript 6 modules.

Shimming npm packages using webpack

The default way (by webpack) of accessing modules (global variable), wasn’t my cup of tea, the current approach is inspired by this.

We first create the shim:

import * as mod from 'yamljs'
if (! window.npm) window.npm = {}
window.npm['yamljs'] = mod

which we then convert using webpack (see the details in the codeblock below) and allows us to import it like:

import * as hack from './yamljs.js'
const YAML = window.npm['yamljs'].default

Webpack 5

When tackling this problem, I didn’t have my packages pinned to a version, thus I also went through an upgrade of Webpack, from 4 to 5. This removed the polyfills, resulting in an error when running ical_obj.toString():

Uncaught ReferenceError: Buffer is not defined

For this issue, the suggested methods of using resolve.fallback (which was node in v4) or resolve.alias did not work.

What did work was:

// webpack.config.json
const path = require('path');
module.exports = [{
  mode: "production",
  entry: [
    './ical-generator.mjs'
  ],
  output: {
    filename: './ical-generator.js',
    path: __dirname,
  },
  resolve: {
    fallback: {
      fs: false,
//      buffer: require.resolve("buffer/"),
    },
/*
    alias: {
      buffer: "buffer",
    },
*/
}]


// package.json
{
  "name": "bundler",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "webpack": "*", "webpack-cli": "*",
    "ical-generator": "*", "fs":"*", "buffer": "*",
  }
}


// ical-generator.mjs
import { Buffer } from 'buffer/'
window.Buffer = Buffer
import * as mod from 'ical-generator'
if (! window.npm) window.npm = {}
window.npm['ical-generator'] = mod

After running npm install; npm run build we can now use the library in our code:

import * as hack from "./ical-generator.js'
const ical = window.npm['ical-generator'].default