Fix: Pass devtool webpack option in dev mode (styleguidist#569)

Closes styleguidist#456

Author: AttackTheDarkness

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.
 

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.
 

scripts/utils/__tests__/mergeWebpackConfig.spec.js

@@ -38,3 +38,21 @@ it('should ignore certain Webpack plugins', () => {
 	expect(result.plugins[0].constructor.name).toBe('UglifyJsPlugin');
 	expect(result.plugins[1].constructor.name).toBe('MyPlugin');
 });
+
+it('should pass devtool settings in development', () => {
+	const result = mergeWebpackConfig(
+		{ devtool: false },
+		() => ({ devtool: 'source-map' }),
+		'development'
+	);
+	expect(result).toEqual({ devtool: 'source-map' });
+});
+
+it('should ignore devtool settings in production', () => {
+	const result = mergeWebpackConfig(
+		{ devtool: false },
+		() => ({ devtool: 'source-map' }),
+		'production'
+	);
+	expect(result).toEqual({ devtool: false });
+});

scripts/utils/mergeWebpackConfig.js

@@ -4,15 +4,13 @@ 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_SECTIONS_ENV = {
+	development: [],
+	// For production builds, we'll ignore devtool settings to avoid
+	// source mapping bloat.
+	production: ['devtool'],
+};
 
 const IGNORE_PLUGINS = [
 	'CommonsChunkPlugins',
@@ -46,6 +44,6 @@ const merge = mergeBase({
  */
 module.exports = function mergeWebpackConfig(baseConfig, userConfig, env) {
 	const userConfigObject = isFunction(userConfig) ? userConfig(env) : userConfig;
-	const safeUserConfig = omit(userConfigObject, IGNORE_SECTIONS);
+	const safeUserConfig = omit(userConfigObject, IGNORE_SECTIONS.concat(IGNORE_SECTIONS_ENV[env]));
 	return merge(baseConfig, safeUserConfig);
 };