@@ -39,15 +39,14 @@ npm install webpack-dev-middleware --save-dev
39
39
## Usage
40
40
41
41
``` js
42
+ const express = require (" express" );
42
43
const webpack = require (" webpack" );
43
44
const middleware = require (" webpack-dev-middleware" );
44
45
45
46
const compiler = webpack ({
46
47
// webpack options
47
48
});
48
49
49
- const express = require (" express" );
50
-
51
50
const app = express ();
52
51
53
52
app .use (
@@ -275,10 +274,10 @@ You have to provide `.join()` and `mkdirp` method to the `outputFileSystem` inst
275
274
This can be done simply by using ` path.join ` :
276
275
277
276
``` js
278
- const webpack = require (" webpack" );
279
277
const path = require (" node:path" );
280
- const myOutputFileSystem = require (" my-fs" );
281
278
const mkdirp = require (" mkdirp" );
279
+ const myOutputFileSystem = require (" my-fs" );
280
+ const webpack = require (" webpack" );
282
281
283
282
myOutputFileSystem .join = path .join .bind (path); // no need to bind
284
283
myOutputFileSystem .mkdirp = mkdirp .bind (mkdirp); // no need to bind
@@ -475,15 +474,14 @@ Since `output.publicPath` and `output.filename`/`output.chunkFilename` can be dy
475
474
But there is a solution to avoid it - mount the middleware to a non-root route, for example:
476
475
477
476
``` js
477
+ const express = require (" express" );
478
478
const webpack = require (" webpack" );
479
479
const middleware = require (" webpack-dev-middleware" );
480
480
481
481
const compiler = webpack ({
482
482
// webpack options
483
483
});
484
484
485
- const express = require (" express" );
486
-
487
485
const app = express ();
488
486
489
487
// Mounting the middleware to the non-root route allows avoids this.
@@ -518,15 +516,14 @@ Example Implementation:
518
516
519
517
``` js
520
518
const express = require (" express" );
519
+ const isObject = require (" is-object" );
521
520
const webpack = require (" webpack" );
521
+ const middleware = require (" webpack-dev-middleware" );
522
522
523
523
const compiler = webpack ({
524
524
/* Webpack configuration */
525
525
});
526
526
527
- const isObject = require (" is-object" );
528
- const middleware = require (" webpack-dev-middleware" );
529
-
530
527
// eslint-disable-next-line new-cap
531
528
const app = new express ();
532
529
@@ -606,11 +603,11 @@ Examples of use with other servers will follow here.
606
603
### Connect
607
604
608
605
``` js
609
- const connect = require (" connect" );
610
606
const http = require (" node:http" );
607
+ const connect = require (" connect" );
611
608
const webpack = require (" webpack" );
612
- const webpackConfig = require (" ./webpack.config.js" );
613
609
const devMiddleware = require (" webpack-dev-middleware" );
610
+ const webpackConfig = require (" ./webpack.config.js" );
614
611
615
612
const compiler = webpack (webpackConfig);
616
613
const devMiddlewareOptions = {
@@ -627,11 +624,11 @@ http.createServer(app).listen(3000);
627
624
628
625
``` js
629
626
const http = require (" node:http" );
630
- const Router = require (" router" );
631
627
const finalhandler = require (" finalhandler" );
628
+ const Router = require (" router" );
632
629
const webpack = require (" webpack" );
633
- const webpackConfig = require (" ./webpack.config.js" );
634
630
const devMiddleware = require (" webpack-dev-middleware" );
631
+ const webpackConfig = require (" ./webpack.config.js" );
635
632
636
633
const compiler = webpack (webpackConfig);
637
634
const devMiddlewareOptions = {
@@ -655,8 +652,8 @@ server.listen(3000);
655
652
``` js
656
653
const express = require (" express" );
657
654
const webpack = require (" webpack" );
658
- const webpackConfig = require (" ./webpack.config.js" );
659
655
const devMiddleware = require (" webpack-dev-middleware" );
656
+ const webpackConfig = require (" ./webpack.config.js" );
660
657
661
658
const compiler = webpack (webpackConfig);
662
659
const devMiddlewareOptions = {
@@ -674,8 +671,8 @@ app.listen(3000, () => console.log("Example app listening on port 3000!"));
674
671
``` js
675
672
const Koa = require (" koa" );
676
673
const webpack = require (" webpack" );
677
- const webpackConfig = require (" ./webpack.simple.config" );
678
674
const middleware = require (" webpack-dev-middleware" );
675
+ const webpackConfig = require (" ./webpack.simple.config" );
679
676
680
677
const compiler = webpack (webpackConfig);
681
678
const devMiddlewareOptions = {
@@ -693,8 +690,8 @@ app.listen(3000);
693
690
``` js
694
691
const Hapi = require (" @hapi/hapi" );
695
692
const webpack = require (" webpack" );
696
- const webpackConfig = require (" ./webpack.config.js" );
697
693
const devMiddleware = require (" webpack-dev-middleware" );
694
+ const webpackConfig = require (" ./webpack.config.js" );
698
695
699
696
const compiler = webpack (webpackConfig);
700
697
const devMiddlewareOptions = {};
@@ -727,8 +724,8 @@ Fastify interop will require the use of `fastify-express` instead of `middie` fo
727
724
``` js
728
725
const fastify = require (" fastify" )();
729
726
const webpack = require (" webpack" );
730
- const webpackConfig = require (" ./webpack.config.js" );
731
727
const devMiddleware = require (" webpack-dev-middleware" );
728
+ const webpackConfig = require (" ./webpack.config.js" );
732
729
733
730
const compiler = webpack (webpackConfig);
734
731
const devMiddlewareOptions = {
@@ -743,9 +740,9 @@ await fastify.listen(3000);
743
740
### Hono
744
741
745
742
``` js
746
- import webpack from " webpack" ;
747
743
import { serve } from " @hono/node-server" ;
748
744
import { Hono } from " hono" ;
745
+ import webpack from " webpack" ;
749
746
import devMiddleware from " webpack-dev-middleware" ;
750
747
import webpackConfig from " ./webpack.config.js" ;
751
748
0 commit comments