A simple and fast webpack development server with HMR support
npm install -D serve-webpack
yarn add -D serve-webpack
The serve-webpack
module is intended to be used as a local development server, that automatically compiles a Webpack configuration in watch-mode, and serves the output directory as static files over HTTP, using serve-handler. Additionally, a Websocket server is opened for HMR support, and a client-side script injected along with Webpack's HotModuleReplacementPlugin.
serve-webpack
offers cli and node API support:
cli usage:
npx serve-webpack --require ts-node/register --config webpack.config.ts
node usage:
const serveWebpack = require('serve-webpack')
serveWebpack({ require: 'ts-node/register', config: 'webpack.config.ts' })
type: string
(supports multiple)
Require a module before requiring the Webpack configuration. Useful for registering ts-node or babel, for example.
type: string
Path to the Webpack configuration, relative to process.cwd()
. Supports a single configuration exported via module.exports
either in object or function form. In case of an array, only the first is used.
type: boolean
default: true
Enable or disable the Websocket server and other HMR additions. Enabled by default.
type: object
(supports multiple)
Additional environment variables passed to the Webpack configurations that export a function. The function's argument will be an env object. For example, the following configuration
serve-webpack --env.NODE_ENV=local --env.production --env.test=false
will result in
// webpack.config.js
module.exports = (env) => {
console.log(env.NODE_ENV) // "local"
console.log(env.production) // true
console.log(env.test) // false
}
serve-webpack
supports its custom key serve?: Object
in the supplied Webpack configuration. Because this makes the configuration invalid, the key is deleted after parsing and before passing the rest to the Webpack compiler. Typescript type augmentations are available.
key | description | type | default |
---|---|---|---|
protocol |
The protocol of the dev server | `http: | https:` |
host |
The hostname of the dev server | string |
localhost |
port |
The port of the dev server | number |
3000 |
socketPath |
The path of the websocket | string |
/__socket |
path |
The fs path from where serve-handler serves files | string |
Webpack's output.path , eg. /public |
path |
The url path where serve-handler binds | string |
Webpack's output.publicPath , eg. / |
The serve
key also supports all serve-handler options, that are passed directly to it. All requests except for the socketPath
are passed to the handler.