webpack-dev-middleware

Getting Started

npm install webpack-dev-middleware --save-dev

Warning

We do not recommend installing this module globally.

Usage

constexpress=require("express");constwebpack=require("webpack");constmiddleware=require("webpack-dev-middleware");constcompiler=webpack({// webpack options});constapp=express();app.use(middleware(compiler,{// webpack-dev-middleware options}),);app.listen(3000,()=>console.log("Example app listening on port 3000!"));

Options

methods

headers

webpackDevMiddleware(compiler,{headers:()=>({"Last-Modified":newDate(),}),});

webpackDevMiddleware(compiler,{headers:(req,res,context)=>{res.setHeader("Last-Modified",newDate());},});

webpackDevMiddleware(compiler,{headers:[{key:"X-custom-header",value:"foo",},{key:"Y-custom-header",value:"bar",},],});

webpackDevMiddleware(compiler,{headers:()=>[{key:"X-custom-header",value:"foo",},{key:"Y-custom-header",value:"bar",},],});

index

mimeTypes

mimeTypeDefault

etag

lastModified

cacheControl

cacheImmutable

publicPath

stats

serverSideRender

writeToDisk

constwebpack=require("webpack");constconfiguration={/* Webpack configuration */};constcompiler=webpack(configuration);middleware(compiler,{writeToDisk:(filePath)=>/superman\.css$/.test(filePath),});

outputFileSystem

constpath=require("node:path");constmkdirp=require("mkdirp");constmyOutputFileSystem=require("my-fs");constwebpack=require("webpack");myOutputFileSystem.join=path.join.bind(path);// no need to bindmyOutputFileSystem.mkdirp=mkdirp.bind(mkdirp);// no need to bindconstcompiler=webpack({/* Webpack configuration */});middleware(compiler,{outputFileSystem:myOutputFileSystem});

modifyResponseData

constwebpack=require("webpack");constconfiguration={/* Webpack configuration */};constcompiler=webpack(configuration);middleware(compiler,{// Note - if you send the `Range` header you will have `ReadStream`// Also `data` can be `string` or `Buffer`modifyResponseData:(req,res,data,byteLength)=>// Your logic// Don't use `res.end()` or `res.send()` here({ data, byteLength}),});

API

close(callback)

Parameters

callback

constexpress=require("express");constwebpack=require("webpack");constcompiler=webpack({/* Webpack configuration */});constmiddleware=require("webpack-dev-middleware");constinstance=middleware(compiler);// eslint-disable-next-line new-capconstapp=newexpress();app.use(instance);setTimeout(()=>{// Says `webpack` to stop watch changesinstance.close();},1000);

invalidate(callback)

Parameters

callback

constexpress=require("express");constwebpack=require("webpack");constcompiler=webpack({/* Webpack configuration */});constmiddleware=require("webpack-dev-middleware");constinstance=middleware(compiler);// eslint-disable-next-line new-capconstapp=newexpress();app.use(instance);setTimeout(()=>{// After a short delay the configuration is changed and a banner plugin is added to the confignewwebpack.BannerPlugin("A new banner").apply(compiler);// Recompile the bundle with the banner plugin:instance.invalidate();},1000);

waitUntilValid(callback)

Parameters

callback

constexpress=require("express");constwebpack=require("webpack");constcompiler=webpack({/* Webpack configuration */});constmiddleware=require("webpack-dev-middleware");constinstance=middleware(compiler);// eslint-disable-next-line new-capconstapp=newexpress();app.use(instance);instance.waitUntilValid(()=>{console.log("Package is in a valid state");});

getFilenameFromUrl(url)

Parameters

url

constexpress=require("express");constwebpack=require("webpack");constcompiler=webpack({/* Webpack configuration */});constmiddleware=require("webpack-dev-middleware");constinstance=middleware(compiler);// eslint-disable-next-line new-capconstapp=newexpress();app.use(instance);instance.waitUntilValid(()=>{constfilename=instance.getFilenameFromUrl("/bundle.js");console.log(`Filename is${filename}`);});

FAQ

Avoid blocking requests to non-webpack resources.

constexpress=require("express");constwebpack=require("webpack");constmiddleware=require("webpack-dev-middleware");constcompiler=webpack({// webpack options});constapp=express();// Mounting the middleware to the non-root route allows avoids this.// Note - check your public path, if you want to handle `/dist/`, you need to setup `output.publicPath` to `/` value.app.use("/dist/",middleware(compiler,{// webpack-dev-middleware options}),);app.listen(3000,()=>console.log("Example app listening on port 3000!"));

Server-Side Rendering

constexpress=require("express");constisObject=require("is-object");constwebpack=require("webpack");constmiddleware=require("webpack-dev-middleware");constcompiler=webpack({/* Webpack configuration */});// eslint-disable-next-line new-capconstapp=newexpress();// This function makes server rendering of asset references consistent with different webpack chunk/entry configurationsfunctionnormalizeAssets(assets){if(isObject(assets)){returnObject.values(assets);}returnArray.isArray(assets) ?assets :[assets];}app.use(middleware(compiler,{serverSideRender:true}));// The following middleware would not be invoked until the latest build is finished.app.use((req,res)=>{const{ devMiddleware}=res.locals.webpack;const{ outputFileSystem}=devMiddleware;constjsonWebpackStats=devMiddleware.stats.toJson();const{ assetsByChunkName, outputPath}=jsonWebpackStats;// Then use `assetsByChunkName` for server-side rendering// For example, if you have only one main chunk:res.send(`<html>  <head>    <title>My App</title>    <style>${normalizeAssets(assetsByChunkName.main).filter((path)=>path.endsWith(".css")).map((path)=>outputFileSystem.readFileSync(path.join(outputPath,path))).join("\n")}    </style>  </head>  <body>    <div></div>${normalizeAssets(assetsByChunkName.main).filter((path)=>path.endsWith(".js")).map((path)=>`<script src="${path}"></script>`).join("\n")}  </body></html>  `);});

Support

Other servers

Connect

consthttp=require("node:http");constconnect=require("connect");constwebpack=require("webpack");constdevMiddleware=require("webpack-dev-middleware");constwebpackConfig=require("./webpack.config.js");constcompiler=webpack(webpackConfig);constdevMiddlewareOptions={/** Your webpack-dev-middleware-options */};constapp=connect();app.use(devMiddleware(compiler,devMiddlewareOptions));http.createServer(app).listen(3000);

Router

consthttp=require("node:http");constfinalhandler=require("finalhandler");constRouter=require("router");constwebpack=require("webpack");constdevMiddleware=require("webpack-dev-middleware");constwebpackConfig=require("./webpack.config.js");constcompiler=webpack(webpackConfig);constdevMiddlewareOptions={/** Your webpack-dev-middleware-options */};// eslint-disable-next-line new-capconstrouter=Router();router.use(devMiddleware(compiler,devMiddlewareOptions));constserver=http.createServer((req,res)=>{router(req,res,finalhandler(req,res));});server.listen(3000);

Express

constexpress=require("express");constwebpack=require("webpack");constdevMiddleware=require("webpack-dev-middleware");constwebpackConfig=require("./webpack.config.js");constcompiler=webpack(webpackConfig);constdevMiddlewareOptions={/** Your webpack-dev-middleware-options */};constapp=express();app.use(devMiddleware(compiler,devMiddlewareOptions));app.listen(3000,()=>console.log("Example app listening on port 3000!"));

Koa

constKoa=require("koa");constwebpack=require("webpack");constmiddleware=require("webpack-dev-middleware");constwebpackConfig=require("./webpack.simple.config");constcompiler=webpack(webpackConfig);constdevMiddlewareOptions={/** Your webpack-dev-middleware-options */};constapp=newKoa();app.use(middleware.koaWrapper(compiler,devMiddlewareOptions));app.listen(3000);

Hapi

constHapi=require("@hapi/hapi");constwebpack=require("webpack");constdevMiddleware=require("webpack-dev-middleware");constwebpackConfig=require("./webpack.config.js");constcompiler=webpack(webpackConfig);constdevMiddlewareOptions={};constserver=Hapi.server({port:3000,host:"localhost"});awaitserver.register({plugin:devMiddleware.hapiPlugin(),options:{// The `compiler` option is required    compiler,    ...devMiddlewareOptions,},});awaitserver.start();console.log("Server running on %s",server.info.uri);process.on("unhandledRejection",(err)=>{console.log(err);process.exit(1);});

Fastify

constfastify=require("fastify")();constwebpack=require("webpack");constdevMiddleware=require("webpack-dev-middleware");constwebpackConfig=require("./webpack.config.js");constcompiler=webpack(webpackConfig);constdevMiddlewareOptions={/** Your webpack-dev-middleware-options */};awaitfastify.register(require("@fastify/express"));awaitfastify.use(devMiddleware(compiler,devMiddlewareOptions));awaitfastify.listen(3000);

Hono

import{serve}from"@hono/node-server";import{Hono}from"hono";importwebpackfrom"webpack";importdevMiddlewarefrom"webpack-dev-middleware";importwebpackConfigfrom"./webpack.config.js";constcompiler=webpack(webpackConfig);constdevMiddlewareOptions={/** Your webpack-dev-middleware-options */};constapp=newHono();app.use(devMiddleware.honoWrapper(compiler,devMiddlewareOptions));serve(app);

Contributing

License