custom webpackDevServer.config

Author: linhaobin

packages/react-scripts/config/paths.js

@@ -87,6 +87,8 @@ module.exports = {
   customWebpackConfig: resolveApp('config/webpack.config.js'),
   customWebpackDevConfig: resolveApp('config/webpack.config.dev.js'),
   customWebpackProdConfig: resolveApp('config/webpack.config.prod.js'),
+  // rewired webpack devServer config
+  customWebpackDevServerConfig: resolveApp('config/webpackDevServer.config.js'),
 };
 
 const ownPackageJson = require('../package.json');
@@ -123,6 +125,10 @@ if (
     customWebpackProdConfig: resolveOwn(
       'template/config/webpack.config.prod.js'
     ),
+    // rewired webpack devServer config
+    customWebpackDevServerConfig: resolveOwn(
+      'template/config/webpackDevServer.config.js'
+    ),
   };
 }
 // @remove-on-eject-end

packages/react-scripts/config/utils/requireFile.js

@@ -0,0 +1,12 @@
+// @remove-file-on-eject
+'use strict';
+const fs = require('fs');
+
+module.exports = function requireFile(filename, callback) {
+  let file = undefined;
+  if (fs.existsSync(filename) && fs.statSync(filename).isFile()) {
+    file = require(filename);
+  }
+
+  callback(file);
+};

packages/react-scripts/config/utils/rewired.js

@@ -289,11 +289,11 @@ module.exports = {
 // @remove-on-eject-begin
 
 // rewired webpack config
-const rewired = require('./utils/rewired');
-module.exports = rewired(
-  paths.customWebpackConfig,
-  module.exports,
-  'development'
-);
-module.exports = rewired(paths.customWebpackDevConfig, module.exports);
+const requireFile = require('./utils/requireFile');
+requireFile(paths.customWebpackConfig, config => {
+  module.exports = config(module.exports, 'development');
+});
+requireFile(paths.customWebpackDevConfig, config => {
+  module.exports = config(module.exports);
+});
 // @remove-on-eject-end

packages/react-scripts/config/webpack.config.dev.js

@@ -371,11 +371,11 @@ module.exports = {
 // @remove-on-eject-begin
 
 // rewired webpack config
-const rewired = require('./utils/rewired');
-module.exports = rewired(
-  paths.customWebpackConfig,
-  module.exports,
-  'production'
-);
-module.exports = rewired(paths.customWebpackProdConfig, module.exports);
+const requireFile = require('./utils/requireFile');
+requireFile(paths.customWebpackConfig, config => {
+  module.exports = config(module.exports, 'production');
+});
+requireFile(paths.customWebpackProdConfig, config => {
+  module.exports = config(module.exports);
+});
 // @remove-on-eject-end

packages/react-scripts/config/webpack.config.prod.js

@@ -101,3 +101,16 @@ module.exports = function(proxy, allowedHost) {
     },
   };
 };
+
+// @remove-on-eject-begin
+const defaultConfig = module.exports;
+
+const requireFile = require('./utils/requireFile');
+
+requireFile(paths.customWebpackDevServerConfig, rewiredConfig => {
+  module.exports = function(proxy, allowedHost) {
+    const config = defaultConfig(proxy, allowedHost);
+    rewiredConfig(config, proxy, allowedHost);
+  };
+});
+// @remove-on-eject-end

packages/react-scripts/config/webpackDevServer.config.js

@@ -0,0 +1,5 @@
+module.exports = function(webpackDevServerConfig, proxy, allowedHost) {
+  // rewired webpackDevServerConfig
+
+  return webpackDevServerConfig;
+};