@@ -41,10 +41,13 @@ npm install webpack-dev-middleware --save-dev
41
41
``` js
42
42
const webpack = require (" webpack" );
43
43
const middleware = require (" webpack-dev-middleware" );
44
+
44
45
const compiler = webpack ({
45
46
// webpack options
46
47
});
48
+
47
49
const express = require (" express" );
50
+
48
51
const app = express ();
49
52
50
53
app .use (
99
102
100
103
``` js
101
104
webpackDevMiddleware (compiler, {
102
- headers : () => {
103
- return {
104
- " Last-Modified" : new Date (),
105
- };
106
- },
105
+ headers : () => ({
106
+ " Last-Modified" : new Date (),
107
+ }),
107
108
});
108
109
```
109
110
@@ -250,15 +251,14 @@ The function follows the same premise as [`Array#filter`](https://developer.mozi
250
251
251
252
``` js
252
253
const webpack = require (" webpack" );
254
+
253
255
const configuration = {
254
256
/* Webpack configuration */
255
257
};
256
258
const compiler = webpack (configuration);
257
259
258
260
middleware (compiler, {
259
- writeToDisk : (filePath ) => {
260
- return / superman\. css$ / .test (filePath);
261
- },
261
+ writeToDisk : (filePath ) => / superman\. css$ / .test (filePath),
262
262
});
263
263
```
264
264
@@ -276,7 +276,7 @@ This can be done simply by using `path.join`:
276
276
277
277
``` js
278
278
const webpack = require (" webpack" );
279
- const path = require (" path" );
279
+ const path = require (" node: path" );
280
280
const myOutputFileSystem = require (" my-fs" );
281
281
const mkdirp = require (" mkdirp" );
282
282
@@ -296,6 +296,7 @@ Allows to set up a callback to change the response data.
296
296
297
297
``` js
298
298
const webpack = require (" webpack" );
299
+
299
300
const configuration = {
300
301
/* Webpack configuration */
301
302
};
@@ -304,11 +305,10 @@ const compiler = webpack(configuration);
304
305
middleware (compiler, {
305
306
// Note - if you send the `Range` header you will have `ReadStream`
306
307
// Also `data` can be `string` or `Buffer`
307
- modifyResponseData : (req , res , data , byteLength ) => {
308
+ modifyResponseData : (req , res , data , byteLength ) =>
308
309
// Your logic
309
310
// Don't use `res.end()` or `res.send()` here
310
- return { data, byteLength };
311
- },
311
+ ({ data, byteLength }),
312
312
});
313
313
```
314
314
@@ -333,12 +333,16 @@ A function executed once the middleware has stopped watching.
333
333
``` js
334
334
const express = require (" express" );
335
335
const webpack = require (" webpack" );
336
+
336
337
const compiler = webpack ({
337
338
/* Webpack configuration */
338
339
});
340
+
339
341
const middleware = require (" webpack-dev-middleware" );
342
+
340
343
const instance = middleware (compiler);
341
344
345
+ // eslint-disable-next-line new-cap
342
346
const app = new express ();
343
347
344
348
app .use (instance);
@@ -365,12 +369,16 @@ A function executed once the middleware has invalidated.
365
369
``` js
366
370
const express = require (" express" );
367
371
const webpack = require (" webpack" );
372
+
368
373
const compiler = webpack ({
369
374
/* Webpack configuration */
370
375
});
376
+
371
377
const middleware = require (" webpack-dev-middleware" );
378
+
372
379
const instance = middleware (compiler);
373
380
381
+ // eslint-disable-next-line new-cap
374
382
const app = new express ();
375
383
376
384
app .use (instance);
@@ -402,12 +410,16 @@ If the bundle is valid at the time of calling, the callback is executed immediat
402
410
``` js
403
411
const express = require (" express" );
404
412
const webpack = require (" webpack" );
413
+
405
414
const compiler = webpack ({
406
415
/* Webpack configuration */
407
416
});
417
+
408
418
const middleware = require (" webpack-dev-middleware" );
419
+
409
420
const instance = middleware (compiler);
410
421
422
+ // eslint-disable-next-line new-cap
411
423
const app = new express ();
412
424
413
425
app .use (instance);
@@ -433,12 +445,16 @@ URL for the requested file.
433
445
``` js
434
446
const express = require (" express" );
435
447
const webpack = require (" webpack" );
448
+
436
449
const compiler = webpack ({
437
450
/* Webpack configuration */
438
451
});
452
+
439
453
const middleware = require (" webpack-dev-middleware" );
454
+
440
455
const instance = middleware (compiler);
441
456
457
+ // eslint-disable-next-line new-cap
442
458
const app = new express ();
443
459
444
460
app .use (instance);
@@ -461,10 +477,13 @@ But there is a solution to avoid it - mount the middleware to a non-root route,
461
477
``` js
462
478
const webpack = require (" webpack" );
463
479
const middleware = require (" webpack-dev-middleware" );
480
+
464
481
const compiler = webpack ({
465
482
// webpack options
466
483
});
484
+
467
485
const express = require (" express" );
486
+
468
487
const app = express ();
469
488
470
489
// Mounting the middleware to the non-root route allows avoids this.
@@ -500,12 +519,15 @@ Example Implementation:
500
519
``` js
501
520
const express = require (" express" );
502
521
const webpack = require (" webpack" );
522
+
503
523
const compiler = webpack ({
504
524
/* Webpack configuration */
505
525
});
526
+
506
527
const isObject = require (" is-object" );
507
528
const middleware = require (" webpack-dev-middleware" );
508
529
530
+ // eslint-disable-next-line new-cap
509
531
const app = new express ();
510
532
511
533
// This function makes server rendering of asset references consistent with different webpack chunk/entry configurations
@@ -522,7 +544,7 @@ app.use(middleware(compiler, { serverSideRender: true }));
522
544
// The following middleware would not be invoked until the latest build is finished.
523
545
app .use ((req , res ) => {
524
546
const { devMiddleware } = res .locals .webpack ;
525
- const outputFileSystem = devMiddleware . outputFileSystem ;
547
+ const { outputFileSystem } = devMiddleware;
526
548
const jsonWebpackStats = devMiddleware .stats .toJson ();
527
549
const { assetsByChunkName , outputPath } = jsonWebpackStats;
528
550
@@ -585,7 +607,7 @@ Examples of use with other servers will follow here.
585
607
586
608
``` js
587
609
const connect = require (" connect" );
588
- const http = require (" http" );
610
+ const http = require (" node: http" );
589
611
const webpack = require (" webpack" );
590
612
const webpackConfig = require (" ./webpack.config.js" );
591
613
const devMiddleware = require (" webpack-dev-middleware" );
@@ -604,7 +626,7 @@ http.createServer(app).listen(3000);
604
626
### Router
605
627
606
628
``` js
607
- const http = require (" http" );
629
+ const http = require (" node: http" );
608
630
const Router = require (" router" );
609
631
const finalhandler = require (" finalhandler" );
610
632
const webpack = require (" webpack" );
@@ -615,11 +637,13 @@ const compiler = webpack(webpackConfig);
615
637
const devMiddlewareOptions = {
616
638
/** Your webpack-dev-middleware-options */
617
639
};
640
+
641
+ // eslint-disable-next-line new-cap
618
642
const router = Router ();
619
643
620
644
router .use (devMiddleware (compiler, devMiddlewareOptions));
621
645
622
- var server = http .createServer ((req , res ) => {
646
+ const server = http .createServer ((req , res ) => {
623
647
router (req, res, finalhandler (req, res));
624
648
});
625
649
@@ -675,22 +699,20 @@ const devMiddleware = require("webpack-dev-middleware");
675
699
const compiler = webpack (webpackConfig);
676
700
const devMiddlewareOptions = {};
677
701
678
- (async () => {
679
- const server = Hapi .server ({ port: 3000 , host: " localhost" });
702
+ const server = Hapi .server ({ port: 3000 , host: " localhost" });
680
703
681
- await server .register ({
682
- plugin: devMiddleware .hapiPlugin (),
683
- options: {
684
- // The `compiler` option is required
685
- compiler,
686
- ... devMiddlewareOptions,
687
- },
688
- });
704
+ await server .register ({
705
+ plugin: devMiddleware .hapiPlugin (),
706
+ options: {
707
+ // The `compiler` option is required
708
+ compiler,
709
+ ... devMiddlewareOptions,
710
+ },
711
+ });
689
712
690
- await server .start ();
713
+ await server .start ();
691
714
692
- console .log (" Server running on %s" , server .info .uri );
693
- })();
715
+ console .log (" Server running on %s" , server .info .uri );
694
716
695
717
process .on (" unhandledRejection" , (err ) => {
696
718
console .log (err);
@@ -713,11 +735,9 @@ const devMiddlewareOptions = {
713
735
/** Your webpack-dev-middleware-options */
714
736
};
715
737
716
- (async () => {
717
- await fastify .register (require (" @fastify/express" ));
718
- await fastify .use (devMiddleware (compiler, devMiddlewareOptions));
719
- await fastify .listen (3000 );
720
- })();
738
+ await fastify .register (require (" @fastify/express" ));
739
+ await fastify .use (devMiddleware (compiler, devMiddlewareOptions));
740
+ await fastify .listen (3000 );
721
741
```
722
742
723
743
### Hono
0 commit comments