use react-hot-loader only under DEV

kenberkeley · Oct 16, 2016 · c14da0d · c14da0d
1 parent 74a6ab4
commit c14da0d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,8 @@
 > 2016/8/28 &nbsp; 引入 `cross-env` 解决跨平台问题，新增优化项 `DedupePlugin`  
 > 2016/8/29 &nbsp; 重命名 `makeContainer / makeReducer.js => createContainer / createReducer.js`  
 > 2016/9/10 &nbsp; 重构 `src/redux/`  
-> 2016/10/15 &nbsp; 同步 Vue Demo 的改动
+> 2016/10/15 &nbsp; 同步 Vue Demo 的改动  
+> 2016/10/16 &nbsp; 改进：仅在开发模式下引入 React Hot Loader
 
 ## 目录
 #### &sect; [技术栈](#features)

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -3,7 +3,8 @@ var path = require('path'),
   NyanProgressPlugin = require('nyan-progress-webpack-plugin');
 
 var rootPath = path.resolve(__dirname, '..'), // 项目根目录
-  src = path.join(rootPath, 'src'); // 开发源码目录
+  src = path.join(rootPath, 'src'), // 开发源码目录
+  env = process.env.NODE_ENV.trim(); // 当前环境
 var commonPath = {
   rootPath: rootPath,
   dist: path.join(rootPath, 'dist'), // build 后输出目录
@@ -29,7 +30,6 @@ module.exports = {
       'react-router-redux',
       'redux',
       'redux-thunk'
-      // 'superagent'
     ]
   },
   output: {
@@ -61,19 +61,27 @@ module.exports = {
   module: {
     loaders: [{
       test: /\.(js|jsx)$/,
-      loaders: ['react-hot', 'babel?' + JSON.stringify({
-        cacheDirectory: true,
-        plugins: [
-          'transform-runtime',
-          'transform-decorators-legacy'
-        ],
-        presets: ['es2015', 'react', 'stage-0'],
-        env: {
-          production: {
-            presets: ['react-optimize']
+      loaders: (function() {
+        var _loaders = ['babel?' + JSON.stringify({
+          cacheDirectory: true,
+          plugins: [
+            'transform-runtime',
+            'transform-decorators-legacy'
+          ],
+          presets: ['es2015', 'react', 'stage-0'],
+          env: {
+            production: {
+              presets: ['react-optimize']
+            }
           }
+        }), 'eslint'];
+
+        // 开发环境下引入 React Hot Loader
+        if (env === 'development') {
+          _loaders.unshift('react-hot');
         }
-      }), 'eslint'],
+        return _loaders;
+      })(),
       include: src,
       exclude: /node_modules/
     }, {
@@ -110,8 +118,8 @@ module.exports = {
       // ================================
       // 配置开发全局常量
       // ================================
-      __DEV__: process.env.NODE_ENV.trim() === 'development',
-      __PROD__: process.env.NODE_ENV.trim() === 'production',
+      __DEV__: env === 'development',
+      __PROD__: env === 'production',
       __COMPONENT_DEVTOOLS__: false, // 是否使用组件形式的 Redux DevTools
       __WHY_DID_YOU_UPDATE__: false // 是否检测不必要的组件重渲染
     })

diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
@@ -41,7 +41,9 @@ config.plugins.push(
     }
   }),
   new webpack.optimize.OccurenceOrderPlugin(),
-  new ExtractTextPlugin('[name].[contenthash:6].css'),
+  new ExtractTextPlugin('[name].[contenthash:6].css', {
+    allChunks : true // 若要按需加载 CSS 则请注释掉该行
+  }),
   new HtmlWebpackPlugin({
     filename: '../index.html',
     template: config.commonPath.indexHTML,