Enable tree-shaking with Webpack 2 and Babel

seeds-of-creativity · Feb 12, 2017 · 7bbe94c · 7bbe94c
1 parent b450989
commit 7bbe94c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -127,17 +127,6 @@
       "react"
     ],
     "env": {
-      "production": {
-        "presets": [
-          "react-optimize"
-        ]
-      },
-      "development": {
-        "plugins": [
-          "transform-react-jsx-source",
-          "transform-react-jsx-self"
-        ]
-      },
       "test": {
         "plugins": [
           "rewire"

diff --git a/tools/build.js b/tools/build.js
@@ -15,8 +15,6 @@ import bundle from './bundle';
 import render from './render';
 import pkg from '../package.json';
 
-process.env.NODE_ENV = process.argv.includes('--release') ? 'production' : 'development';
-
 /**
  * Compiles the project from source files into a distributable
  * format and copies it to the output (build) folder.

diff --git a/tools/start.js b/tools/start.js
@@ -19,7 +19,6 @@ import clean from './clean';
 import copy from './copy';
 
 const isDebug = !process.argv.includes('--release');
-process.env.NODE_ENV = isDebug ? 'development' : 'production';
 process.argv.push('--watch');
 
 const [clientConfig, serverConfig] = webpackConfig;

diff --git a/tools/webpack.config.js b/tools/webpack.config.js
@@ -31,6 +31,49 @@ const config = {
 
   module: {
     rules: [
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        include: [
+          path.resolve(__dirname, '../src'),
+        ],
+        query: {
+          // https://github.com/babel/babel-loader#options
+          cacheDirectory: isDebug,
+
+          // https://babeljs.io/docs/usage/options/
+          babelrc: false,
+          presets: [
+            // A Babel preset that can automatically determine the Babel plugins and polyfills
+            // https://github.com/babel/babel-preset-env
+            ['env', {
+              targets: {
+                browsers: pkg.browserslist,
+              },
+              modules: false,
+              useBuiltIns: false,
+              debug: false,
+            }],
+            // Experimental ECMAScript proposals
+            // https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-
+            'stage-2',
+            // JSX, Flow
+            // https://github.com/babel/babel/tree/master/packages/babel-preset-react
+            'react',
+            // Optimize React code for the production build
+            // https://github.com/thejameskyle/babel-react-optimize
+            ...isDebug ? [] : ['react-optimize'],
+          ],
+          plugins: [
+            // Adds component stack to warning messages
+            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source
+            ...isDebug ? ['transform-react-jsx-source'] : [],
+            // Adds __self attribute to JSX which React will use for some warnings
+            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-self
+            ...isDebug ? ['transform-react-jsx-self'] : [],
+          ],
+        },
+      },
       {
         test: /\.css/,
         use: [
@@ -127,43 +170,6 @@ const clientConfig = {
     chunkFilename: isDebug ? '[name].chunk.js' : '[name].[chunkhash:8].chunk.js',
   },
 
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        loader: 'babel-loader',
-        include: [
-          path.resolve(__dirname, '../src'),
-        ],
-        query: {
-          // https://github.com/babel/babel-loader#options
-          cacheDirectory: isDebug,
-
-          // https://babeljs.io/docs/usage/options/
-          presets: [ // override package.json/babel.presets
-            // A Babel preset that can automatically determine the Babel plugins and polyfills
-            // https://github.com/babel/babel-preset-env
-            ['env', {
-              targets: {
-                browsers: pkg.browserslist,
-              },
-              modules: false,
-              useBuiltIns: false,
-              debug: false,
-            }],
-            // Experimental ECMAScript proposals
-            // https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-
-            'stage-2',
-            // JSX, Flow
-            // https://github.com/babel/babel/tree/master/packages/babel-preset-react
-            'react',
-          ],
-        },
-      },
-      ...config.module.rules,
-    ],
-  },
-
   resolve: { ...config.resolve },
 
   plugins: [
@@ -248,31 +254,23 @@ const serverConfig = {
   },
 
   module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        loader: 'babel-loader',
-        include: [
-          path.resolve(__dirname, '../src'),
-        ],
-        query: {
-          cacheDirectory: isDebug,
-          presets: [ // override package.json/babel.presets
-            ['env', {
-              targets: {
-                node: parseFloat(pkg.engines.node.replace(/^\D+/g, '')),
-              },
-              modules: false,
-              useBuiltIns: false,
-              debug: false,
-            }],
-            'stage-2',
-            'react',
-          ],
-        },
+    ...config.module,
+
+    // Override babel-preset-env configuration for Node.js
+    rules: config.module.rules.map(rule => (rule.loader !== 'babel-loader' ? rule : {
+      ...rule,
+      query: {
+        ...rule.query,
+        presets: rule.query.presets.map(preset => (preset[0] !== 'env' ? preset : ['env', {
+          targets: {
+            node: parseFloat(pkg.engines.node.replace(/^\D+/g, '')),
+          },
+          modules: false,
+          useBuiltIns: false,
+          debug: false,
+        }])),
       },
-      ...config.module.rules,
-    ],
+    })),
   },
 
   resolve: { ...config.resolve },