From 0a52cf38db96c7c919e77ecef6dfb3a28a28d4a1 Mon Sep 17 00:00:00 2001
From: Ryan Oriecuia <ryan@Ryans-MacBook-Pro.local>
Date: Wed, 9 Aug 2017 15:59:43 -0700
Subject: [PATCH] Using devtools with react-stylegudist #456

The `devtool` setting in your webpack config will now get passed through for non-production environments, e.g., running the hot-reloading server.

It will still get ignored for production builds.

Docs updated, and added a test.
---
 docs/Configuration.md                           |  2 +-
 docs/Webpack.md                                 |  4 ++--
 .../utils/__tests__/mergeWebpackConfig.spec.js  | 10 ++++++++++
 scripts/utils/mergeWebpackConfig.js             | 17 +++++++----------
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/docs/Configuration.md b/docs/Configuration.md
index cbcc231d2..18fcb8822 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -443,7 +443,7 @@ module.exports = {
 
 > **Warning:** This option disables config load from `webpack.config.js`, load your config [manually](Webpack.md#reusing-your-projects-webpack-config).
 
-> **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored.
+> **Note:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.
 
 > **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
 
diff --git a/docs/Webpack.md b/docs/Webpack.md
index 965babb6b..7340597cd 100644
--- a/docs/Webpack.md
+++ b/docs/Webpack.md
@@ -31,7 +31,7 @@ module.exports = {
 };
 ```
 
-> **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored.
+> **Note:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.
 
 > **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
 
@@ -69,7 +69,7 @@ module.exports = {
 
 > **Warning:** This option disables config load from `webpack.config.js`, see above how to load your config manually.
 
-> **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored.
+> **Note:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.
 
 > **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
 
diff --git a/scripts/utils/__tests__/mergeWebpackConfig.spec.js b/scripts/utils/__tests__/mergeWebpackConfig.spec.js
index 8907a3f69..4393dcabc 100644
--- a/scripts/utils/__tests__/mergeWebpackConfig.spec.js
+++ b/scripts/utils/__tests__/mergeWebpackConfig.spec.js
@@ -38,3 +38,13 @@ it('should ignore certain Webpack plugins', () => {
 	expect(result.plugins[0].constructor.name).toBe('UglifyJsPlugin');
 	expect(result.plugins[1].constructor.name).toBe('MyPlugin');
 });
+
+[
+	{ env: 'development', action: 'pass', expected: 'source-map' },
+	{ env: 'production', action: 'ignore', expected: false },
+].forEach(t => {
+	it(`should ${t.action} devtool settings in ${t.env}`, () => {
+		const result = mergeWebpackConfig({ devtool: false }, () => ({ devtool: 'source-map' }), t.env);
+		expect(result).toEqual({ devtool: t.expected });
+	});
+});
diff --git a/scripts/utils/mergeWebpackConfig.js b/scripts/utils/mergeWebpackConfig.js
index 6a3c4a6dd..ea3369f3d 100644
--- a/scripts/utils/mergeWebpackConfig.js
+++ b/scripts/utils/mergeWebpackConfig.js
@@ -4,15 +4,7 @@ const isFunction = require('lodash/isFunction');
 const omit = require('lodash/omit');
 const mergeBase = require('webpack-merge');
 
-const IGNORE_SECTIONS = [
-	'entry',
-	'externals',
-	'output',
-	'watch',
-	'stats',
-	'devtool',
-	'styleguidist',
-];
+const IGNORE_SECTIONS = ['entry', 'externals', 'output', 'watch', 'stats', 'styleguidist'];
 
 const IGNORE_PLUGINS = [
 	'CommonsChunkPlugins',
@@ -46,6 +38,11 @@ const merge = mergeBase({
  */
 module.exports = function mergeWebpackConfig(baseConfig, userConfig, env) {
 	const userConfigObject = isFunction(userConfig) ? userConfig(env) : userConfig;
-	const safeUserConfig = omit(userConfigObject, IGNORE_SECTIONS);
+	let safeUserConfig = omit(userConfigObject, IGNORE_SECTIONS);
+	// For production builds, we'll ignore devtool settings to avoid
+	// source mapping bloat.
+	if (env === 'production') {
+		safeUserConfig = omit(safeUserConfig, ['devtool']);
+	}
 	return merge(baseConfig, safeUserConfig);
 };