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

iansu · Jun 10, 2018 · 2ec7eaa · 2ec7eaa
1 parent 3e16544
commit 2ec7eaa
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/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.
           {

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/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.
           {

diff --git a/packages/react-scripts/package.json b/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",