@@ -14,49 +14,11 @@ const sockHost = process.env.WDS_SOCKET_HOST;
1414const sockPath = process . env . WDS_SOCKET_PATH ; // default: '/sockjs-node'
1515const sockPort = process . env . WDS_SOCKET_PORT ;
1616
17- module . exports = function ( proxy , allowedHost ) {
17+ module . exports = function ( proxy , _allowedHost ) {
1818 return {
19- // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
20- // websites from potentially accessing local content through DNS rebinding:
21- // https://github.com/webpack/webpack-dev-server/issues/887
22- // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
23- // However, it made several existing use cases such as development in cloud
24- // environment or subdomains in development significantly more complicated:
25- // https://github.com/facebook/create-react-app/issues/2271
26- // https://github.com/facebook/create-react-app/issues/2233
27- // While we're investigating better solutions, for now we will take a
28- // compromise. Since our WDS configuration only serves files in the `public`
29- // folder we won't consider accessing them a vulnerability. However, if you
30- // use the `proxy` feature, it gets more dangerous because it can expose
31- // remote code execution vulnerabilities in backends like Django and Rails.
32- // So we will disable the host check normally, but enable it if you have
33- // specified the `proxy` setting. Finally, we let you override it if you
34- // really know what you're doing with a special environment variable.
35- disableHostCheck :
36- ! proxy || process . env . DANGEROUSLY_DISABLE_HOST_CHECK === 'true' ,
19+ allowedHosts : "all" ,
3720 // Enable gzip compression of generated files.
3821 compress : true ,
39- // Silence WebpackDevServer's own logs since they're generally not useful.
40- // It will still show compile warnings and errors with this setting.
41- clientLogLevel : 'none' ,
42- // By default WebpackDevServer serves physical files from current directory
43- // in addition to all the virtual build products that it serves from memory.
44- // This is confusing because those files won’t automatically be available in
45- // production build folder unless we copy them. However, copying the whole
46- // project directory is dangerous because we may expose sensitive files.
47- // Instead, we establish a convention that only files in `public` directory
48- // get served. Our build script will copy `public` into the `build` folder.
49- // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
50- // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
51- // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
52- // Note that we only recommend to use `public` folder as an escape hatch
53- // for files like `favicon.ico`, `manifest.json`, and libraries that are
54- // for some reason broken when imported through webpack. If you just want to
55- // use an image, put it in `src` and `import` it from JavaScript instead.
56- contentBase : paths . appPublic ,
57- contentBasePublicPath : paths . publicUrlOrPath ,
58- // By default files from `contentBase` will not trigger a page reload.
59- watchContentBase : true ,
6022 // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
6123 // for the WebpackDevServer client so it can learn when the files were
6224 // updated. The WebpackDevServer client is included as an entry point
@@ -65,71 +27,92 @@ module.exports = function (proxy, allowedHost) {
6527 hot : true ,
6628 // Use 'ws' instead of 'sockjs-node' on server since we're using native
6729 // websockets in `webpackHotDevClient`.
68- transportMode : 'ws' ,
69- // Prevent a WS client from getting injected as we're already including
70- // `webpackHotDevClient`.
71- injectClient : false ,
72- // Enable custom sockjs pathname for websocket connection to hot reloading server.
73- // Enable custom sockjs hostname, pathname and port for websocket connection
74- // to hot reloading server.
75- sockHost,
76- sockPath,
77- sockPort,
30+ webSocketServer : 'ws' ,
7831 // It is important to tell WebpackDevServer to use the same "publicPath" path as
7932 // we specified in the webpack config. When homepage is '.', default to serving
8033 // from the root.
8134 // remove last slash so user can land on `/test` instead of `/test/`
82- publicPath : paths . publicUrlOrPath . slice ( 0 , - 1 ) ,
83- // WebpackDevServer is noisy by default so we emit custom message instead
84- // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
85- quiet : true ,
86- // Reportedly, this avoids CPU overload on some systems.
87- // https://github.com/facebook/create-react-app/issues/293
88- // src/node_modules is not ignored to support absolute imports
89- // https://github.com/facebook/create-react-app/issues/1065
90- watchOptions : {
91- ignored : ignoredFiles ( paths . appSrc ) ,
35+ devMiddleware : {
36+ publicPath : paths . publicUrlOrPath . slice ( 0 , - 1 ) ,
37+ } ,
38+ static : {
39+ // By default WebpackDevServer serves physical files from current directory
40+ // in addition to all the virtual build products that it serves from memory.
41+ // This is confusing because those files won’t automatically be available in
42+ // production build folder unless we copy them. However, copying the whole
43+ // project directory is dangerous because we may expose sensitive files.
44+ // Instead, we establish a convention that only files in `public` directory
45+ // get served. Our build script will copy `public` into the `build` folder.
46+ // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
47+ // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
48+ // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
49+ // Note that we only recommend to use `public` folder as an escape hatch
50+ // for files like `favicon.ico`, `manifest.json`, and libraries that are
51+ // for some reason broken when imported through webpack. If you just want to
52+ // use an image, put it in `src` and `import` it from JavaScript instead.
53+ directory : paths . appPublic ,
54+ publicPath : paths . publicUrlOrPath ,
55+ // By default files from `directory` will not trigger a page reload.
56+ // Reportedly, this avoids CPU overload on some systems.
57+ // https://github.com/facebook/create-react-app/issues/293
58+ // src/node_modules is not ignored to support absolute imports
59+ // https://github.com/facebook/create-react-app/issues/1065
60+ watch : {
61+ ignored : ignoredFiles ( paths . appSrc ) ,
62+ } ,
9263 } ,
9364 https : getHttpsConfig ( ) ,
9465 host,
95- overlay : false ,
9666 historyApiFallback : {
9767 // Paths with dots should still use the history fallback.
9868 // See https://github.com/facebook/create-react-app/issues/387.
9969 disableDotRule : true ,
10070 index : paths . publicUrlOrPath ,
10171 } ,
102- headers : {
72+ headers : {
10373 "Access-Control-Allow-Origin" : "*" ,
10474 "Access-Control-Allow-Methods" : "GET, POST, PUT, DELETE, PATCH, OPTIONS" ,
10575 "Access-Control-Allow-Headers" : "X-Requested-With, content-type, Authorization"
10676 } ,
107- public : allowedHost ,
77+ client : {
78+ // Silence WebpackDevServer's own logs since they're generally not useful.
79+ // It will still show compile warnings and errors with this setting.
80+ logging : 'none' ,
81+ overlay : false ,
82+ webSocketURL : {
83+ // Enable custom sockjs pathname for websocket connection to hot reloading server.
84+ // Enable custom sockjs hostname, pathname and port for websocket connection
85+ // to hot reloading server.
86+ hostname : sockHost ,
87+ pathname : sockPath ,
88+ port : sockPort ,
89+ } ,
90+ } ,
10891 // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
10992 proxy,
110- before ( app , server ) {
93+ onBeforeSetupMiddleware ( devServer ) {
11194 // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
11295 // middlewares before `redirectServedPath` otherwise will not have any effect
11396 // This lets us fetch source contents from webpack for the error overlay
114- app . use ( evalSourceMapMiddleware ( server ) ) ;
97+ devServer . app . use ( evalSourceMapMiddleware ( devServer ) ) ;
11598 // This lets us open files from the runtime error overlay.
116- app . use ( errorOverlayMiddleware ( ) ) ;
99+ devServer . app . use ( errorOverlayMiddleware ( ) ) ;
117100
118101 if ( fs . existsSync ( paths . proxySetup ) ) {
119102 // This registers user provided middleware for proxy reasons
120- require ( paths . proxySetup ) ( app ) ;
103+ require ( paths . proxySetup ) ( devServer . app ) ;
121104 }
122105 } ,
123- after ( app ) {
106+ onAfterSetupMiddleware ( devServer ) {
124107 // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
125- app . use ( redirectServedPath ( paths . publicUrlOrPath ) ) ;
108+ devServer . app . use ( redirectServedPath ( paths . publicUrlOrPath ) ) ;
126109
127110 // This service worker file is effectively a 'no-op' that will reset any
128111 // previous service worker registered for the same host:port combination.
129112 // We do this in development to avoid hitting the production cache if
130113 // it used the same host and port.
131114 // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
132- app . use ( noopServiceWorkerMiddleware ( paths . publicUrlOrPath ) ) ;
115+ devServer . app . use ( noopServiceWorkerMiddleware ( paths . publicUrlOrPath ) ) ;
133116 } ,
134117 } ;
135118} ;
0 commit comments