fix(webpack-config): source-map support in browser (#229)

Evaneos · Feb 15, 2017 · 666adc7 · 666adc7
1 parent 091fcbb
commit 666adc7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 28 deletions.
diff --git a/config/build/webpack.config.client.js b/config/build/webpack.config.client.js
@@ -11,8 +11,8 @@ export default function clientConfig(options) {
     return mergeWith({}, config(options), {
         entry: [
             vitaminResolve('src', 'client', 'index.jsx'),
-            ...(options.hot ? [hotMiddlewareEntry] : []),
-        ],
+            options.hot && hotMiddlewareEntry,
+        ].filter(Boolean),
         output: {
             path: options.client.buildPath,
             filename: options.client.filename,
@@ -24,21 +24,18 @@ export default function clientConfig(options) {
             ],
         },
         plugins: [
-            ...(options.hot ? [
-                new webpack.NoErrorsPlugin(),
-                new webpack.optimize.OccurrenceOrderPlugin(),
-            ] : []),
-            ...(!options.dev ? [
-                new webpack.optimize.UglifyJsPlugin({ minimize: true }),
-            ] : []),
             new webpack.DefinePlugin({
                 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
             }),
-            ...(options.client.serviceWorker ? [
-                new ServiceWorkerWebpackPlugin({
-                    entry: appResolve(options.client.serviceWorker),
-                }),
-            ] : []),
-        ],
+
+            options.hot && new webpack.NoErrorsPlugin(),
+            options.hot && new webpack.optimize.OccurrenceOrderPlugin(),
+
+            !options.dev && new webpack.optimize.UglifyJsPlugin({ minimize: true }),
+
+            options.client.serviceWorker && new ServiceWorkerWebpackPlugin({
+                entry: appResolve(options.client.serviceWorker),
+            }),
+        ].filter(Boolean),
     }, concat);
 }
diff --git a/config/build/webpack.config.common.js b/config/build/webpack.config.common.js
@@ -101,12 +101,9 @@ export function config(options) {
                 },
                 test: /\.css$/,
                 debug: true,
-
             }),
-            ...(options.hot ? [
-                new HotModuleReplacementPlugin(),
-                new NamedModulesPlugin(),
-            ] : []),
-        ],
+            options.hot && new HotModuleReplacementPlugin(),
+            options.hot && new NamedModulesPlugin(),
+        ].filter(Boolean),
     };
 }
diff --git a/config/build/webpack.config.server.js b/config/build/webpack.config.server.js
@@ -33,9 +33,9 @@ function externals(context, request, callback) {
 export default function serverConfig(options) {
     return mergeWith({}, config(options), {
         entry: [
-            ...(options.hot ? [hotPoll] : []),
+            options.hot && hotPoll,
             vitaminResolve('src', 'server', 'server.js'),
-        ],
+        ].filter(Boolean),
         output: {
             filename: options.server.filename,
             path: options.server.buildPath,
@@ -60,14 +60,14 @@ export default function serverConfig(options) {
             ],
         },
         plugins: [
-            ...(options.dev ? [new BannerPlugin({
-                banner: 'require("source-map-support").install();',
+            options.dev && new BannerPlugin({
+                banner: 'require("source-map-support").install({ environment: \'node\' });',
                 raw: true,
                 entryOnly: false,
-            })] : []),
+            }),
             new DefinePlugin({
                 ASSETS_BY_CHUNK_NAME: JSON.stringify(options.assetsByChunkName),
             }),
-        ],
+        ].filter(Boolean),
     }, concat);
 }
diff --git a/src/client/index.jsx b/src/client/index.jsx
@@ -3,6 +3,7 @@ import { Router, useRouterHistory } from 'react-router';
 import AsyncProps from 'async-props';
 import { syncHistoryWithStore } from 'react-router-redux';
 import { createHistory } from 'history';
+import { install as installSourceMapSupport } from 'source-map-support';
 import RedBox from 'redbox-react';
 /* eslint-disable import/no-extraneous-dependencies */
 import routes from '__app_modules__routes__';
@@ -15,6 +16,10 @@ import { create as createStore, createRootReducer } from '../shared/store';
 import config from '../../config';
 import App from '../shared/components/App';
 
+if (process.env.NODE_ENV !== 'production') {
+    installSourceMapSupport({ environment: 'browser' });
+}
+
 function render(history, store, rootRoute, element) {
     const insertCss = ({ _insertCss }) => _insertCss();
 
@@ -31,7 +36,6 @@ function render(history, store, rootRoute, element) {
     );
 }
 
-
 function bootstrapClient() {
     // Grab the state from a global injected into server-generated HTML
     const initialState = window.__INITIAL_STATE__ ?