Conditionally load multiple Polyfills using Webpack, Promises and Code Splitting

For my latest react project, I wanted to be able to polyfill certain features which are missing in older browsers, yet not include them in my final code bundle if the browser the user is using already supports that feature.

This was a great problem for webpack's code splitting feature to solve!

After a quick google, I found a post from Ian Obermiller which set me on the correct path, however the post didn't expand on how to load multiple polyfills conditionally.

For example:
  • Safari is missing...
Read More

Output filename not configured error from Webpack

I couldn't find an answer to this simple issue, so I thought I'd quickly post one myself.

Whilst creating a new ReactJS app, I wanted to use Webpack to build all of my modules into a single bundle.

I had installed it globally by running npm install webpack -g and I had included it in my project by running npm install webpack --save-dev.

However, on running the webpack command, I was seeing the following output:
Output filename not configured.

The solution

Turns out it was simple. I had missed th...
Read More

Using PrismJS with RequireJS and loading plugins asynchronously

Whilst developing my site, I came across a beautiful syntax highlighter called PrismJS which I wanted to use, however, it is not built out of the box for use with AMD APIs such as RequireJS.

I wanted to enable a few features with PrismJS and RequireJS, namely, the ability to:
  • Load PrismJS through RequireJS and have it highlight code elements.
  • Dynamically load the necessary language files so that code blocks can be highlighted with the correct language definitions.
  • Load plugins so that I could use...
Read More