feat: 模块加载热更新

Author: 谢明

.babelrc

@@ -14,6 +14,7 @@
   "plugins": [
     "transform-runtime",
     "syntax-dynamic-import",
+    "react-hot-loader/babel",
     "react-loadable/babel",
     "transform-decorators-legacy",
     ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]

config/webpack.config.common.js

@@ -6,7 +6,10 @@ const isDev = process.env.NODE_ENV !== 'production';
 
 module.exports = {
   target: 'web',
-  entry: ['babel-polyfill', './src/client.js'],
+  entry: [
+    'babel-polyfill',
+    './src/client.js'
+  ],
   output: {
     publicPath: '/',
     path: resolve(__dirname, '..', 'build'),
@@ -105,39 +108,11 @@ module.exports = {
   ],
   resolve: {
     modules: [resolve(__dirname, '../src/'), 'node_modules'],
-    extensions: [ '.js', '.scss', '.less' ]
+    extensions: ['.js', '.scss', '.less']
   },
   optimization: {
     splitChunks: {
-      cacheGroups: {
-        default: false,
-        vendors: false,
-
-        // vendor chunk
-        vendor: {
-          // name of the chunk
-          name: 'vendor',
-
-          // async + async chunks
-          chunks: 'all',
-
-          // import file path containing node_modules
-          test: /node_modules/,
-
-          // priority
-          priority: 20
-        },
-
-        // common chunk
-        common: {
-          name: 'common',
-          minChunks: 2,
-          chunks: 'all',
-          priority: 10,
-          reuseExistingChunk: true,
-          enforce: true
-        }
-      }
+      chunks: 'all'
     }
   },
   stats: {

src/components/Article/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Article = () => (
-    <p>2018-09-19T07:52:12.383Z - info: Application env: development
+    <p>MN2018-09-19T07:52:12.383Z - info: Application env: development
     2018-09-19T07:52:12.947Z - info: HTTP server is now running on http://localhost:3001
     webpack built 2400ef2b021b433f8527 in 5849ms
     2018-09-19T07:52:18.328Z - info: Hash: 2400ef2b021b433f8527

src/containers/AppLayout.js

@@ -3,6 +3,7 @@ import Loadable from 'react-loadable';
 import { Route, Switch } from 'react-router-dom';
 import NotFound from '../containers/NotFound';
 import NavBar from '../components/NavBar';
+// import Article from '../components/Article';
 
 const Home = Loadable({
   loader: () => import('../components/CssModule' /* webpackChunkName: 'Home' */),