Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including webpack-hot-2048-loader with all npm packages installed. Try it out:

require("webpack-hot-middleware/package.json"); // webpack-hot-middleware is a peer dependency. var webpackHot2048Loader = require("webpack-hot-2048-loader")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

webpack-hot-2048-loader v0.0.2

A Webpack loader that shows you 2048 during hot reload rebuilding from webpack-hot-middleware

Webpack Hot 2048 Loader

Shows 2048 in an iFrame during hot reload rebuilding to keep your easily distracted mind focused on your project.

Screencap showing hot reloading 2048 iFrame appearing and disappearing


This project requires webpack-hot-midleware with at least version 2.12.0 (see this PR). It won't work with the vanilla Webpack dev server.

How To Use

npm install --save-dev webpack-hot-2048-loader

In your development Webpack config file, find your entry point where you include webpack-hot-midleware. It will look something like:

entry: {
    'main': [
        'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',

Then add the webpack-hot-2048-loader before the webpack-hot-middleware loader:

entry: {
    'main': [
        'webpack-hot-2048!webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',

Then restart your development server. That's it!


You can change the website it loads with:




Recently I've been thinking a lot about distraction. One of my projects takes up to 15 seconds to hot reload. 15 isn't a lot of seconds in general, especially for code compiling, but it's a lifetime for the brain to get distracted. Often I'll tab away to something else, completely forget my code is compiling, then lose the next 10 minutes to Twitter or cat derping. This is an experiment to see if keeping distracting toys in the same tab as the development application can help manage distractions.

Why Does This Require webpack-hot-middleware?

I wrote this to fit only my exact needs. And working with Webpack is sometimes convoluted and undocumented, so making this more generic is harder.

I Get Lot of Junk Logs in the Console From the 2048 iFrame


Follow Me and/or Give Me Bitcoin

Twitter @andrewray

Bitcoin 19MZGbDFT3NZcjoUTJL6wNMxnQTMpphiEq

My coinbase address if you want to support my wretched lifestyle

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free