Skip to content

Commit a087646

Browse files
refactor: update webpack config (#2109)
1 parent f94554c commit a087646

13 files changed

+332
-164
lines changed

README.md

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,14 @@ npm install webpack-dev-middleware --save-dev
3939
## Usage
4040

4141
```js
42+
const express = require("express");
4243
const webpack = require("webpack");
4344
const middleware = require("webpack-dev-middleware");
4445

4546
const compiler = webpack({
4647
// webpack options
4748
});
4849

49-
const express = require("express");
50-
5150
const app = express();
5251

5352
app.use(
@@ -275,10 +274,10 @@ You have to provide `.join()` and `mkdirp` method to the `outputFileSystem` inst
275274
This can be done simply by using `path.join`:
276275

277276
```js
278-
const webpack = require("webpack");
279277
const path = require("node:path");
280-
const myOutputFileSystem = require("my-fs");
281278
const mkdirp = require("mkdirp");
279+
const myOutputFileSystem = require("my-fs");
280+
const webpack = require("webpack");
282281

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

477476
```js
477+
const express = require("express");
478478
const webpack = require("webpack");
479479
const middleware = require("webpack-dev-middleware");
480480

481481
const compiler = webpack({
482482
// webpack options
483483
});
484484

485-
const express = require("express");
486-
487485
const app = express();
488486

489487
// Mounting the middleware to the non-root route allows avoids this.
@@ -518,15 +516,14 @@ Example Implementation:
518516

519517
```js
520518
const express = require("express");
519+
const isObject = require("is-object");
521520
const webpack = require("webpack");
521+
const middleware = require("webpack-dev-middleware");
522522

523523
const compiler = webpack({
524524
/* Webpack configuration */
525525
});
526526

527-
const isObject = require("is-object");
528-
const middleware = require("webpack-dev-middleware");
529-
530527
// eslint-disable-next-line new-cap
531528
const app = new express();
532529

@@ -606,11 +603,11 @@ Examples of use with other servers will follow here.
606603
### Connect
607604

608605
```js
609-
const connect = require("connect");
610606
const http = require("node:http");
607+
const connect = require("connect");
611608
const webpack = require("webpack");
612-
const webpackConfig = require("./webpack.config.js");
613609
const devMiddleware = require("webpack-dev-middleware");
610+
const webpackConfig = require("./webpack.config.js");
614611

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

628625
```js
629626
const http = require("node:http");
630-
const Router = require("router");
631627
const finalhandler = require("finalhandler");
628+
const Router = require("router");
632629
const webpack = require("webpack");
633-
const webpackConfig = require("./webpack.config.js");
634630
const devMiddleware = require("webpack-dev-middleware");
631+
const webpackConfig = require("./webpack.config.js");
635632

636633
const compiler = webpack(webpackConfig);
637634
const devMiddlewareOptions = {
@@ -655,8 +652,8 @@ server.listen(3000);
655652
```js
656653
const express = require("express");
657654
const webpack = require("webpack");
658-
const webpackConfig = require("./webpack.config.js");
659655
const devMiddleware = require("webpack-dev-middleware");
656+
const webpackConfig = require("./webpack.config.js");
660657

661658
const compiler = webpack(webpackConfig);
662659
const devMiddlewareOptions = {
@@ -674,8 +671,8 @@ app.listen(3000, () => console.log("Example app listening on port 3000!"));
674671
```js
675672
const Koa = require("koa");
676673
const webpack = require("webpack");
677-
const webpackConfig = require("./webpack.simple.config");
678674
const middleware = require("webpack-dev-middleware");
675+
const webpackConfig = require("./webpack.simple.config");
679676

680677
const compiler = webpack(webpackConfig);
681678
const devMiddlewareOptions = {
@@ -693,8 +690,8 @@ app.listen(3000);
693690
```js
694691
const Hapi = require("@hapi/hapi");
695692
const webpack = require("webpack");
696-
const webpackConfig = require("./webpack.config.js");
697693
const devMiddleware = require("webpack-dev-middleware");
694+
const webpackConfig = require("./webpack.config.js");
698695

699696
const compiler = webpack(webpackConfig);
700697
const devMiddlewareOptions = {};
@@ -727,8 +724,8 @@ Fastify interop will require the use of `fastify-express` instead of `middie` fo
727724
```js
728725
const fastify = require("fastify")();
729726
const webpack = require("webpack");
730-
const webpackConfig = require("./webpack.config.js");
731727
const devMiddleware = require("webpack-dev-middleware");
728+
const webpackConfig = require("./webpack.config.js");
732729

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

745742
```js
746-
import webpack from "webpack";
747743
import { serve } from "@hono/node-server";
748744
import { Hono } from "hono";
745+
import webpack from "webpack";
749746
import devMiddleware from "webpack-dev-middleware";
750747
import webpackConfig from "./webpack.config.js";
751748

eslint.config.mjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,10 @@ export default defineConfig([
55
{
66
extends: [configs["recommended-dirty"]],
77
},
8+
{
9+
files: ["test/helpers/runner.js"],
10+
rules: {
11+
"n/hashbang": "off",
12+
},
13+
},
814
]);

package-lock.json

Lines changed: 169 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)