@bucky24/builder

This is a simple wrapper around the webpack hot-reload system. Why build this? Well I've found the following issues with the webpack hot reload system:

• Doesn't handle complex paths well. Try to load localhost:8080/a/long/path/here. Webpack dev server will attempt to find build/a/long/path/here/bundle.js which obviously doesn't exist.
• If you're building a server and client, you have to run them both as separate node processes if you're using the webpack dev server.

This module allows you to easily start a webpack dev server that hot reloads appropriately and integrates with your existing backend. Are there better modules that do this already? Yeah probably, but that's never stopped me before.

Usage

Builder

This module exports a single class, Builder, as a default export.

Constructor

The constructor takes a single argument, that being the pathname to the webpack config you want to use.

const Builder = require('@bucky24/builder');
const path = require('path');

const builder = new Builder(path.join(__dirname, 'webpack.config.js'));

serveIndex

This method serves the built index html file from the build directory. It takes as a parameter an express Response object

app.get('/', async (req, res) => {
    builder.serveIndex(res);
});

serveStatic

This method attempts to extrapolate what static resource is being requested, and serve it from the build directory. It takes as parameters an express Request object and an express Response object.

app.get("*", (req, res) => {
    builder.serveStatic(req, res);
});

setServer

This method allows the Builder to listen for websocket requests and connect the hot-reload socket. It takes as a parameter an http Server.

const server = app.listen(port, () => {
    console.log(`Listening on port ${port}`);
});

builder.setServer(server);