Skip to content
[WIP] A re-implementation of webpack development server library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
packages
.gitignore
LICENSE
README.md
tsconfig.json

README.md

webpack-server-kit

A re-implementation of webpack development server logic.

You can create a webpack development server with this library on any server framework. In addition, this library supports working on subdirectory.

Of course, We provide the out-of-the-box middleware for express and koa.

This is an alternative (in a sense) of webpack-dev-middleware and webpack-hmr-midlleware.

Middleware

If you plan to use it directly on Koa and Express, please refer to:

Usage

We will show you how to integrate this library with other web servers.

Here we use Node's native http module as an example.

First, install the core library:

npm install @webpack-server-kit/core
# or use yarn:
yarn add @webpack-server-kit/core

Next, create service contexts and modify server's response handler:

import http from 'http'
import { DevContext, HmrContext } from '@webpack-server-kit/core'

// Need a webpack compiler instance can be passed to contexts.
const compiler = {/* webpack.Compiler */}

// Dev server support: serve the webpack compiled files.
const dev = new DevContext(compiler)
// Hmr support: enable hmr service.
const hmr = new HmrContext(compiler)

// Create a server with an asynchronous request handler.
http.createServer(async (req, res) => {
  // Handle the request and
  // pass http.IncomingRequest to request parameter.
  const devSession = dev.incoming({request: req})
  const hmrSession = hmr.incoming({request: req})
  
  // Determine which service this request matches
  const session = await devSession.test() ? devSession
    : await hmrSession.test() ? hmrSession
    : null
    
  if (session) {
    session.on('headers', (headers, status) => {
      res.set(headers)
      res.status(status)
    })
    session.pipe(res)
    // Respond to request.
    // (Must be after the bind operations)
    await session.run()
  } else {
    // Handling requests outside of the service,
    // such as handling server-side rendering logic or returning 404.
  }
}).listen(3000)

Then you need to enable hot module replacement (if you need) in your webpack config:

  1. Add HMR plugin to the plugins array:

    plugins: [
      new webpack.HotModuleReplacementPlugin(),
    ]
  2. Add webpack-hot-middleware/client into the entry array.

    entry: [
     'webpack-hot-middleware/client',
     'index.js' // or your custom entry
    ]

    This step relies on the original webpack-hot-middleware library, so you need to add it as a dependency. (We plan to re-implement the client entry as a part of this library before the stable release.)

API

Work in progress.

License

See LICENSE file.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.