Using devtools with react-stylegudist styleguidist#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

@@ -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,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 });
+	});
+});

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);
 };