1. koa-webpack-hot-middleware
webpack hot reload middleware for koa
koa-webpack-hot-middleware
Package: koa-webpack-hot-middleware
Created by: dayAlone
Last modified: Fri, 21 Jul 2023 15:34:31 GMT
Version: 1.0.3
Downloads: 2,579
Repository: https://github.com/dayAlone/koa-webpack-hot-middleware

Install

npm install koa-webpack-hot-middleware
yarn add koa-webpack-hot-middleware

koa-webpack-hot-middleware

webpack hot reload middleware for koa

Usage

same with https://github.com/glenjamin/webpack-hot-middleware

Webpack Hot Middleware

Webpack hot reloading using only webpack-dev-middleware. This allows you to add hot reloading into an existing server without webpack-dev-server.

Installation & Usage

See example/ for an example of usage.

First, install the npm module.

 npm install --save-dev koa-webpack-hot-middleware

Next, enable hot reloading in your webpack config:

  1. Add the following three plugins to the plugins array:

     plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
    

    Occurence ensures consistent build hashes, hot module replacement is
    somewhat self-explanatory, no errors is used to handle errors more cleanly.

  2. Add 'webpack-hot-middleware/client' into the entry array.
    This connects to the server to receive notifications when the bundle
    rebuilds and then updates your client bundle accordingly.

Now add the middleware into your server:

  1. Add webpack-dev-middleware the usual way

     var webpack = require('webpack');
    var webpackConfig = require('./webpack.config');
    var compiler = webpack(webpackConfig);
    
    app.use(require("webpack-dev-middleware")(compiler, {
        noInfo: true, publicPath: webpackConfig.output.publicPath
    }));
    
  2. Add koa-webpack-hot-middleware attached to the same compiler instance

     app.use(require("koa-webpack-hot-middleware")(compiler));
    

And you're all set!

License

Copyright 2015 Glen Mailer.

MIT Licened.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code