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
33 changes: 15 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,14 @@ npm install webpack-dev-middleware --save-dev
## Usage

```js
const express = require("express");
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 @@ -275,10 +274,10 @@ You have to provide `.join()` and `mkdirp` method to the `outputFileSystem` inst
This can be done simply by using `path.join`:

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

myOutputFileSystem.join = path.join.bind(path); // no need to bind
myOutputFileSystem.mkdirp = mkdirp.bind(mkdirp); // no need to bind
Expand Down Expand Up @@ -475,15 +474,14 @@ Since `output.publicPath` and `output.filename`/`output.chunkFilename` can be dy
But there is a solution to avoid it - mount the middleware to a non-root route, for example:

```js
const express = require("express");
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 @@ -518,15 +516,14 @@ Example Implementation:

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

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();

Expand Down Expand Up @@ -606,11 +603,11 @@ Examples of use with other servers will follow here.
### Connect

```js
const connect = require("connect");
const http = require("node:http");
const connect = require("connect");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.js");
const devMiddleware = require("webpack-dev-middleware");
const webpackConfig = require("./webpack.config.js");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
Expand All @@ -627,11 +624,11 @@ http.createServer(app).listen(3000);

```js
const http = require("node:http");
const Router = require("router");
const finalhandler = require("finalhandler");
const Router = require("router");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.js");
const devMiddleware = require("webpack-dev-middleware");
const webpackConfig = require("./webpack.config.js");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
Expand All @@ -655,8 +652,8 @@ server.listen(3000);
```js
const express = require("express");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.js");
const devMiddleware = require("webpack-dev-middleware");
const webpackConfig = require("./webpack.config.js");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
Expand All @@ -674,8 +671,8 @@ app.listen(3000, () => console.log("Example app listening on port 3000!"));
```js
const Koa = require("koa");
const webpack = require("webpack");
const webpackConfig = require("./webpack.simple.config");
const middleware = require("webpack-dev-middleware");
const webpackConfig = require("./webpack.simple.config");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
Expand All @@ -693,8 +690,8 @@ app.listen(3000);
```js
const Hapi = require("@hapi/hapi");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.js");
const devMiddleware = require("webpack-dev-middleware");
const webpackConfig = require("./webpack.config.js");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {};
Expand Down Expand Up @@ -727,8 +724,8 @@ Fastify interop will require the use of `fastify-express` instead of `middie` fo
```js
const fastify = require("fastify")();
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.js");
const devMiddleware = require("webpack-dev-middleware");
const webpackConfig = require("./webpack.config.js");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
Expand All @@ -743,9 +740,9 @@ await fastify.listen(3000);
### Hono

```js
import webpack from "webpack";
import { serve } from "@hono/node-server";
import { Hono } from "hono";
import webpack from "webpack";
import devMiddleware from "webpack-dev-middleware";
import webpackConfig from "./webpack.config.js";

Expand Down
6 changes: 6 additions & 0 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,10 @@ export default defineConfig([
{
extends: [configs["recommended-dirty"]],
},
{
files: ["test/helpers/runner.js"],
rules: {
"n/hashbang": "off",
},
},
]);
174 changes: 169 additions & 5 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading