feat: make dynamic import disabling more clear

Author: calvinl

common/js/pages/Todos/index.js

@@ -3,6 +3,8 @@ import Loadable from 'react-loadable';
 import { Loading } from 'components/common';
 import { fetchTodos } from 'actions/todos';
 
+// NOTE: To turn off dynamic imports, import this container normally using:
+// import TodosContainer from 'containers/Todos';
 const TodosContainer = Loadable({
   loader: () => import('../../containers/Todos'),
   loading: Loading

server/renderer/handler.js

@@ -103,15 +103,15 @@ export default function handleRender(req, res) {
       </Provider>
     );
 
-    if (!config.enableDynamicImports) {
-      return component;
+    if (config.enableDynamicImports) {
+      return (
+        <Loadable.Capture report={moduleName => modules.push(moduleName)}>
+          {component}
+        </Loadable.Capture>
+      );
     }
 
-    return (
-      <Loadable.Capture report={moduleName => modules.push(moduleName)}>
-        {component}
-      </Loadable.Capture>
-    );
+    return component;
   };
 
   // Execute the render only after all promises have been resolved.

webpack/development.hot.js

@@ -18,6 +18,7 @@ const entry = [
 
 // Additional plugins
 let plugins = [
+  ...baseConfig.plugins,
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NoEmitOnErrorsPlugin(),
   new webpack.NamedModulesPlugin()
@@ -31,9 +32,6 @@ if (!config.enableDynamicImports) {
   }));
 }
 
-// Additional loaders
-const loaders = [];
-
 const webpackConfig = {
   ...baseConfig,
   devtool: 'eval',
@@ -44,18 +42,7 @@ const webpackConfig = {
       ...baseConfig.entry.app
     ]
   },
-  plugins: [
-    // don't use the first plugin (isomorphic plugin)
-    ...baseConfig.plugins,
-    ...plugins
-  ],
-  module: {
-    ...baseConfig.module,
-    rules: [
-      ...baseConfig.module.rules,
-      ...loaders
-    ]
-  }
+  plugins
 };
 
 console.info('Firing up Webpack dev server...\n');