kenberkeley · babeliao · Mar 22, 2017 · Jun 20, 2017 · Jun 20, 2017
diff --git a/README.md b/README.md
@@ -196,8 +196,8 @@
 ***
 
 ## <a name="deployment">&sect; 部署</a>
-在 `react-demo` 的命令窗口下，敲下 `npm run build`，将会在项目根目录下生成 `dist/`  
-> 您可以使用命令行静态资源服务器 [serve](https://github.com/tj/serve) ( `npm i serve -g` )，敲下 `serve dist/ -p [端口]` 来快速查看 build 后的项目  
+在 `react-demo` 的命令窗口下，敲下 `npm run build`，将会在项目根目录下生成 `dist/` 同时开启一个express server，此时打开 `localhost:9091` 即可查看 build后的项目
+> 您也可以使用命令行静态资源服务器 [serve](https://github.com/tj/serve) ( `npm i serve -g` )，敲下 `serve dist/ -p [端口]` 来快速查看 build 后的项目  
 > 还可以 `cd dist` 后，`python -m SimpleHTTPServer [端口]` 或 `php -S localhost:[端口]` 快速便捷地实现静态资源服务器
 >
 > 关于生产环境下的部署与优化，已超出本文档的论述范围，请自行查阅相关资料  

diff --git a/build/dev.js b/build/dev.js
@@ -2,12 +2,13 @@ var express = require('express'),
   webpack = require('webpack'),
   // favicon = require('express-favicon'),
   config = require('./webpack.dev.conf'),
+  commonPath = require('./webpack.base.conf').commonPath,
   app = express();
 
 var compiler = webpack(config);
 
 // for highly stable resources
-app.use('/static', express.static(config.commonPath.staticDir));
+app.use('/static', express.static(commonPath.staticDir));
 
 // app.use(favicon(path.join(__dirname, '../favicon.ico')));
 

diff --git a/build/prod.js b/build/prod.js
@@ -1,15 +1,29 @@
 var fs = require('fs'),
   path = require('path'),
   webpack = require('webpack'),
-  config = require('./webpack.prod.conf');
+  config = require('./webpack.prod.conf'),
+  commonPath = require('./webpack.base.conf').commonPath,
+  express = require('express'),
+  port = process.env.PORT || 9091,
+  app = express();
 
 webpack(config, function(err, stats) {
   // show build info to console
   console.log( stats.toString({ chunks: false, color: true }) );
 
   // save build info to file
   fs.writeFile(
-    path.join(config.commonPath.dist, '__build_info__'),
+    path.join(commonPath.dist, '__build_info__'),
     stats.toString({ color: false })
   );
+
+  var rootPath = path.resolve(__dirname, '..')
+  // 通常用于加载静态资源
+  app.use(express.static(rootPath + '/dist'))
+  // 将所有路径指向index
+  app.get('*', function (request, response){
+    response.sendFile(rootPath + '/dist/index.html')
+  })
+  app.listen(port)
+  console.log("server started on port " + port)
 });
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -1,123 +1,126 @@
 var path = require('path'),
-  webpack = require('webpack'),
-  NyanProgressPlugin = require('nyan-progress-webpack-plugin');
+    webpack = require('webpack'),
+    NyanProgressPlugin = require('nyan-progress-webpack-plugin');
 
 var rootPath = path.resolve(__dirname, '..'), // 项目根目录
-  src = path.join(rootPath, 'src'), // 开发源码目录
-  env = process.env.NODE_ENV.trim(); // 当前环境
+    src = path.join(rootPath, 'src'), // 开发源码目录
+    env = process.env.NODE_ENV.trim(); // 当前环境
 var commonPath = {
-  rootPath: rootPath,
-  dist: path.join(rootPath, 'dist'), // build 后输出目录
-  indexHTML: path.join(src, 'index.html'), // 入口基页
-  staticDir: path.join(rootPath, 'static') // 无需处理的静态资源目录
+    rootPath: rootPath,
+    dist: path.join(rootPath, 'dist'), // build 后输出目录
+    indexHTML: path.join(src, 'index.html'), // 入口基页
+    staticDir: path.join(rootPath, 'static') // 无需处理的静态资源目录
 };
 
-module.exports = {
-  commonPath: commonPath,
-  entry: {
-    app: path.join(src, 'app.js'),
-
-    // ================================
-    // 框架 / 类库 分离打包
-    // ================================
-    vendor: [
-      'history',
-      'lodash',
-      'react',
-      'react-dom',
-      'react-redux',
-      'react-router',
-      'react-router-redux',
-      'redux',
-      'redux-thunk'
-    ]
-  },
-  output: {
-    path: path.join(commonPath.dist, 'static'),
-    publicPath: '/static/'
-  },
-  resolve: {
-    extensions: ['', '.js', '.jsx'],
-    alias: {
-      // ================================
-      // 自定义路径别名
-      // ================================
-      ASSET: path.join(src, 'assets'),
-      COMPONENT: path.join(src, 'components'),
-      ACTION: path.join(src, 'redux/actions'),
-      REDUCER: path.join(src, 'redux/reducers'),
-      STORE: path.join(src, 'redux/store'),
-      ROUTE: path.join(src, 'routes'),
-      SERVICE: path.join(src, 'services'),
-      UTIL: path.join(src, 'utils'),
-      HOC: path.join(src, 'utils/HoC'),
-      MIXIN: path.join(src, 'utils/mixins'),
-      VIEW: path.join(src, 'views')
-    }
-  },
-  resolveLoader: {
-    root: path.join(rootPath, 'node_modules')
-  },
-  module: {
-    loaders: [{
-      test: /\.(js|jsx)$/,
-      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'];
+var configBase = {
+    context: rootPath,
+    entry: {
+        app: path.join(src, 'app.js'),
 
-        // 开发环境下引入 React Hot Loader
-        if (env === 'development') {
-          _loaders.unshift('react-hot');
+        // ================================
+        // 框架 / 类库 分离打包
+        // ================================
+        vendor: [
+            'history',
+            'lodash',
+            'react',
+            'react-dom',
+            'react-redux',
+            'react-router',
+            'react-router-redux',
+            'redux',
+            'redux-thunk'
+        ]
+    },
+    output: {
+        path: path.join(commonPath.dist, 'static'),
+        publicPath: '/static/'
+    },
+    resolve: {
+        extensions: ['.js', '.jsx'],
+        alias: {
+            // ================================
+            // 自定义路径别名
+            // ================================
+            ASSET: path.join(src, 'assets'),
+            COMPONENT: path.join(src, 'components'),
+            ACTION: path.join(src, 'redux/actions'),
+            REDUCER: path.join(src, 'redux/reducers'),
+            STORE: path.join(src, 'redux/store'),
+            ROUTE: path.join(src, 'routes'),
+            SERVICE: path.join(src, 'services'),
+            UTIL: path.join(src, 'utils'),
+            HOC: path.join(src, 'utils/HoC'),
+            MIXIN: path.join(src, 'utils/mixins'),
+            VIEW: path.join(src, 'views')
         }
-        return _loaders;
-      })(),
-      include: src,
-      exclude: /node_modules/
-    }, {
-      test: /\.json$/,
-      loader: 'json'
-    }, {
-      test: /\.html$/,
-      loader: 'html'
-    }, {
-      test: /\.(png|jpe?g|gif|svg)$/,
-      loader: 'url',
-      query: {
-        limit: 10240, // 10KB 以下使用 base64
-        name: 'img/[name]-[hash:6].[ext]'
-      }
-    }, {
-      test: /\.(woff2?|eot|ttf|otf)$/,
-      loader: 'url-loader?limit=10240&name=fonts/[name]-[hash:6].[ext]'
-    }]
-  },
-  eslint: {
-    formatter: require('eslint-friendly-formatter')
-  },
-  plugins: [
-    new NyanProgressPlugin(), // 进度条
-    new webpack.DefinePlugin({
-      'process.env': { // 这是给 React / Redux 打包用的
-        NODE_ENV: JSON.stringify('production')
-      },
-      // ================================
-      // 配置开发全局常量
-      // ================================
-      __DEV__: env === 'development',
-      __PROD__: env === 'production',
-      __COMPONENT_DEVTOOLS__: false, // 是否使用组件形式的 Redux DevTools
-      __WHY_DID_YOU_UPDATE__: false // 是否检测不必要的组件重渲染
-    })
-  ]
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                use: (function () {
+                    var _loaders = ['babel-loader?' + JSON.stringify({
+                        cacheDirectory: true,
+                        plugins: [
+                            'transform-runtime',
+                            'transform-decorators-legacy'
+                        ],
+                        presets: ['es2015', 'react', 'stage-0'],
+                        env: {
+                            production: {
+                                presets: ['react-optimize']
+                            }
+                        }
+                    }), {
+                            loader: 'eslint-loader',
+                            options: {
+                                formatter: require('eslint-friendly-formatter')   // 编译后错误报告格式
+                            }
+                        }
+                    ];
+
+                    // 开发环境下引入 React Hot Loader
+                    if (env === 'development') {
+                        _loaders.unshift('react-hot-loader');
+                    }
+                    return _loaders;
+                })(),
+                include: src,
+                exclude: /node_modules/,
+            }, {
+                test: /\.html$/,
+                use: 'html-loader'
+            }, {
+                test: /\.(png|jpe?g|gif|svg)$/,
+                loader: 'url',
+                query: {
+                    limit: 10240, // 10KB 以下使用 base64
+                    name: 'img/[name]-[hash:6].[ext]'
+                }
+            }, {
+                test: /\.(woff2?|eot|ttf|otf)$/,
+                use: 'url-loader?limit=10240&name=fonts/[name]-[hash:6].[ext]'
+            }]
+    },
+    plugins: [
+        new NyanProgressPlugin(), // 进度条
+        new webpack.DefinePlugin({
+            'process.env': { // 这是给 React / Redux 打包用的
+                NODE_ENV: JSON.stringify('production')
+            },
+            // ================================
+            // 配置开发全局常量
+            // ================================
+            __DEV__: env === 'development',
+            __PROD__: env === 'production',
+            __COMPONENT_DEVTOOLS__: false, // 是否使用组件形式的 Redux DevTools
+            __WHY_DID_YOU_UPDATE__: false // 是否检测不必要的组件重渲染
+        })
+    ]
 };
+
+module.exports = {
+    commonPath: commonPath,
+    configBase: configBase
+}