Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions .eslintignore

This file was deleted.

13 changes: 0 additions & 13 deletions .eslintrc.js

This file was deleted.

88 changes: 54 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,13 @@ npm install webpack-dev-middleware --save-dev
```js
const webpack = require("webpack");
const middleware = require("webpack-dev-middleware");

const compiler = webpack({
// webpack options
});

const express = require("express");

const app = express();

app.use(
Expand Down Expand Up @@ -99,11 +102,9 @@ or

```js
webpackDevMiddleware(compiler, {
headers: () => {
return {
"Last-Modified": new Date(),
};
},
headers: () => ({
"Last-Modified": new Date(),
}),
});
```

Expand Down Expand Up @@ -250,15 +251,14 @@ The function follows the same premise as [`Array#filter`](https://developer.mozi

```js
const webpack = require("webpack");

const configuration = {
/* Webpack configuration */
};
const compiler = webpack(configuration);

middleware(compiler, {
writeToDisk: (filePath) => {
return /superman\.css$/.test(filePath);
},
writeToDisk: (filePath) => /superman\.css$/.test(filePath),
});
```

Expand All @@ -276,7 +276,7 @@ This can be done simply by using `path.join`:

```js
const webpack = require("webpack");
const path = require("path");
const path = require("node:path");
const myOutputFileSystem = require("my-fs");
const mkdirp = require("mkdirp");

Expand All @@ -296,6 +296,7 @@ Allows to set up a callback to change the response data.

```js
const webpack = require("webpack");

const configuration = {
/* Webpack configuration */
};
Expand All @@ -304,11 +305,10 @@ const compiler = 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) => {
modifyResponseData: (req, res, data, byteLength) =>
// Your logic
// Don't use `res.end()` or `res.send()` here
return { data, byteLength };
},
({ data, byteLength }),
});
```

Expand All @@ -333,12 +333,16 @@ A function executed once the middleware has stopped watching.
```js
const express = require("express");
const webpack = require("webpack");

const compiler = webpack({
/* Webpack configuration */
});

const middleware = require("webpack-dev-middleware");

const instance = middleware(compiler);

// eslint-disable-next-line new-cap
const app = new express();

app.use(instance);
Expand All @@ -365,12 +369,16 @@ A function executed once the middleware has invalidated.
```js
const express = require("express");
const webpack = require("webpack");

const compiler = webpack({
/* Webpack configuration */
});

const middleware = require("webpack-dev-middleware");

const instance = middleware(compiler);

// eslint-disable-next-line new-cap
const app = new express();

app.use(instance);
Expand Down Expand Up @@ -402,12 +410,16 @@ If the bundle is valid at the time of calling, the callback is executed immediat
```js
const express = require("express");
const webpack = require("webpack");

const compiler = webpack({
/* Webpack configuration */
});

const middleware = require("webpack-dev-middleware");

const instance = middleware(compiler);

// eslint-disable-next-line new-cap
const app = new express();

app.use(instance);
Expand All @@ -433,12 +445,16 @@ URL for the requested file.
```js
const express = require("express");
const webpack = require("webpack");

const compiler = webpack({
/* Webpack configuration */
});

const middleware = require("webpack-dev-middleware");

const instance = middleware(compiler);

// eslint-disable-next-line new-cap
const app = new express();

app.use(instance);
Expand All @@ -461,10 +477,13 @@ But there is a solution to avoid it - mount the middleware to a non-root route,
```js
const webpack = require("webpack");
const middleware = require("webpack-dev-middleware");

const compiler = webpack({
// webpack options
});

const express = require("express");

const app = express();

// Mounting the middleware to the non-root route allows avoids this.
Expand Down Expand Up @@ -500,12 +519,15 @@ Example Implementation:
```js
const express = require("express");
const webpack = require("webpack");

const compiler = webpack({
/* Webpack configuration */
});

const isObject = require("is-object");
const middleware = require("webpack-dev-middleware");

// eslint-disable-next-line new-cap
const app = new express();

// This function makes server rendering of asset references consistent with different webpack chunk/entry configurations
Expand All @@ -522,7 +544,7 @@ 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.outputFileSystem;
const { outputFileSystem } = devMiddleware;
const jsonWebpackStats = devMiddleware.stats.toJson();
const { assetsByChunkName, outputPath } = jsonWebpackStats;

Expand Down Expand Up @@ -585,7 +607,7 @@ Examples of use with other servers will follow here.

```js
const connect = require("connect");
const http = require("http");
const http = require("node:http");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.js");
const devMiddleware = require("webpack-dev-middleware");
Expand All @@ -604,7 +626,7 @@ http.createServer(app).listen(3000);
### Router

```js
const http = require("http");
const http = require("node:http");
const Router = require("router");
const finalhandler = require("finalhandler");
const webpack = require("webpack");
Expand All @@ -615,11 +637,13 @@ const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
/** Your webpack-dev-middleware-options */
};

// eslint-disable-next-line new-cap
const router = Router();

router.use(devMiddleware(compiler, devMiddlewareOptions));

var server = http.createServer((req, res) => {
const server = http.createServer((req, res) => {
router(req, res, finalhandler(req, res));
});

Expand Down Expand Up @@ -675,22 +699,20 @@ const devMiddleware = require("webpack-dev-middleware");
const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {};

(async () => {
const server = Hapi.server({ port: 3000, host: "localhost" });
const server = Hapi.server({ port: 3000, host: "localhost" });

await server.register({
plugin: devMiddleware.hapiPlugin(),
options: {
// The `compiler` option is required
compiler,
...devMiddlewareOptions,
},
});
await server.register({
plugin: devMiddleware.hapiPlugin(),
options: {
// The `compiler` option is required
compiler,
...devMiddlewareOptions,
},
});

await server.start();
await server.start();

console.log("Server running on %s", server.info.uri);
})();
console.log("Server running on %s", server.info.uri);

process.on("unhandledRejection", (err) => {
console.log(err);
Expand All @@ -713,11 +735,9 @@ const devMiddlewareOptions = {
/** Your webpack-dev-middleware-options */
};

(async () => {
await fastify.register(require("@fastify/express"));
await fastify.use(devMiddleware(compiler, devMiddlewareOptions));
await fastify.listen(3000);
})();
await fastify.register(require("@fastify/express"));
await fastify.use(devMiddleware(compiler, devMiddlewareOptions));
await fastify.listen(3000);
```

### Hono
Expand Down
8 changes: 8 additions & 0 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { defineConfig } from "eslint/config";
import configs from "eslint-config-webpack/configs.js";

export default defineConfig([
{
extends: [configs["recommended-dirty"]],
},
]);
Loading
Loading