Add support for WebWorker with worker-loader (facebook#3660)

Author: iansu

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

@@ -213,6 +213,32 @@ module.exports = {
               name: 'static/media/[name].[hash:8].[ext]',
             },
           },
+          // Process WebWorkder JS with Babel.
+          // The preset includes JSX, Flow, and some ESnext features.
+          {
+            test: /\.worker\.(js|jsx|mjs)$/,
+            include: paths.appSrc,
+            use: [
+              require.resolve('worker-loader'),
+              // This loader parallelizes code compilation, it is optional but
+              // improves compile time on larger projects
+              require.resolve('thread-loader'),
+              {
+                loader: require.resolve('babel-loader'),
+                options: {
+                  // @remove-on-eject-begin
+                  babelrc: false,
+                  presets: [require.resolve('babel-preset-react-app')],
+                  // @remove-on-eject-end
+                  // This is a feature of `babel-loader` for webpack (not Babel itself).
+                  // It enables caching results in ./node_modules/.cache/babel-loader/
+                  // directory for faster rebuilds.
+                  cacheDirectory: true,
+                  highlightCode: true,
+                },
+              },
+            ],
+          },
           // Process application JS with Babel.
           // The preset includes JSX, Flow, and some ESnext features.
           {

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

@@ -252,6 +252,29 @@ module.exports = {
               name: 'static/media/[name].[hash:8].[ext]',
             },
           },
+          // Process WebWorkder JS with Babel.
+          // The preset includes JSX, Flow, and some ESnext features.
+          {
+            test: /\.worker\.(js|jsx|mjs)$/,
+            include: paths.appSrc,
+            use: [
+              require.resolve('worker-loader'),
+              // This loader parallelizes code compilation, it is optional but
+              // improves compile time on larger projects
+              require.resolve('thread-loader'),
+              {
+                loader: require.resolve('babel-loader'),
+                options: {
+                  // @remove-on-eject-begin
+                  babelrc: false,
+                  presets: [require.resolve('babel-preset-react-app')],
+                  // @remove-on-eject-end
+                  compact: true,
+                  highlightCode: true,
+                },
+              },
+            ],
+          },
           // Process application JS with Babel.
           // The preset includes JSX, Flow, and some ESnext features.
           {

packages/react-scripts/package.json

@@ -70,7 +70,8 @@
     "webpack": "4.8.3",
     "webpack-dev-server": "3.1.4",
     "webpack-manifest-plugin": "2.0.3",
-    "whatwg-fetch": "2.0.4"
+    "whatwg-fetch": "2.0.4",
+    "worker-loader": "^1.1.1"
   },
   "devDependencies": {
     "react": "^16.3.2",