打包

.babelrc

@@ -1,14 +1,18 @@
 {
-  "presets": ["react", "es2015","stage-0"],
-  "env": {
-    "development": {
-      "plugins": [["react-transform", {
-        "transforms": [{
-          "transform": "react-transform-hmr",
-          "imports": ["react"],
-          "locals": ["module"]
-        }]
-      }]]
-    }
-  }
+  "presets": [
+    ["es2015", {"modules": false}],
+    // webpack understands the native import syntax, and uses it for tree shaking
+
+    "stage-2",
+    // Specifies what level of language features to activate.
+    // Stage 2 is "draft", 4 is finished, 0 is strawman.
+    // See https://tc39.github.io/process-document/
+
+    "react"
+    // Transpile React components to JavaScript
+  ],
+  "plugins": [
+    "react-hot-loader/babel"
+    // Enables React code to work with HMR.
+  ]
 }

package.json

@@ -1,50 +1,44 @@
 {
-  "name": "react-es6-demo",
+  "name": "scaffold",
   "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "description": "react脚手架，基于webpack2,react-router4",
+  "main": "webpack.config.js",
+  "directories": {
+    "test": "test"
+  },
   "scripts": {
-    "start": "webpack-dev-server --progress --colors",
-    "build": "cross-env NODE_ENV=production webpack --config webpack.production.config.js --progress --colors"
+    "start": "webpack-dev-server --open",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.mizlicai.com:mizlicai/scaffold.git"
   },
+  "author": "mcdyzg",
+  "license": "ISC",
   "dependencies": {
-    "q": "^1.4.1",
-    "react": "~15.3.2",
-    "react-dom": "~15.3.2",
-    "react-router": "~2.6.1",
-    "reflux": "^5.0.4"
+    "autoprefixer": "^6.7.2",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-router": "next",
+    "reflux": "^6.2.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.5.3",
-    "babel": "~6.5.2",
-    "babel-core": "~6.16.0",
-    "babel-loader": "~6.2.5",
-    "babel-plugin-react-transform": "^2.0.2",
-    "babel-preset-es2015": "~6.16.0",
-    "babel-preset-react": "~6.16.0",
-    "babel-preset-stage-0": "^6.16.0",
-    "babel-register": "~6.16.3",
-    "browser-sync": "~2.17.3",
-    "classnames": "~2.2.5",
-    "clean-webpack-plugin": "^0.1.14",
-    "cross-env": "^3.1.3",
-    "css-loader": "^0.26.0",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "html-webpack-plugin": "^2.24.1",
-    "lodash": "~4.16.4",
-    "node-sass": "^4.0.0",
+    "babel": "^6.5.2",
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "babel-preset-stage-2": "^6.22.0",
+    "css-loader": "^0.26.1",
+    "html-webpack-plugin": "^2.28.0",
+    "node-sass": "^4.5.0",
     "open-browser-webpack-plugin": "^0.0.3",
-    "postcss-loader": "^1.1.1",
-    "react-transform-hmr": "^1.0.4",
-    "sass-loader": "^4.0.2",
+    "postcss-loader": "^1.3.0",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "sass-loader": "^5.0.1",
     "style-loader": "^0.13.1",
-    "webpack": "^1.14.0",
-    "webpack-dashboard": "^0.2.0",
-    "webpack-dev-server": "~1.14.1"
-  },
-  "repository": {
-    "type": "git",
-    "url": ".."
-  },
-  "author": "Eugene"
-}
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+}

src/app/app.js

@@ -1,35 +1,55 @@
-/**
- * Created by Eugene on 16/11/28.
- */
+// "use strict";
+// //基本组件
+// import React,{Component} from  'react'
+// import ReactDOM from 'react-dom'
+// import {Router,hashHistory} from 'react-router'
+
+// //demo
+// import PageOne from '../pages/PageOne'
+// import PageTwo from '../pages/PageTwo'
+
+// class App extends Component {
+//     constructor(props) {
+//         super(props);
+//     }
+
+//     render() {
+//         return (
+//             <section>
+//                 {this.props.children}
+//             </section>
+//         )
+//     }
+// }
+// const routes = {
+//     path: '/',
+//     component: App,
+//     indexRoute: {component: PageOne},
+//     childRoutes: [
+//         {path: '/pageTwo', component: PageTwo}
+//     ]
+// };
+// ReactDOM.render(<Router history={hashHistory} routes={routes}/>, document.getElementById('app'));
+
 "use strict";
 //基本组件
 import React,{Component} from  'react'
 import ReactDOM from 'react-dom'
-import {Router,hashHistory} from 'react-router'
 
 //demo
 import PageOne from '../pages/PageOne'
-import PageTwo from '../pages/PageTwo'
 
-class App extends Component {
-    constructor(props) {
-        super(props);
-    }
+// class App extends Component {
+//     constructor(props) {
+//         super(props);
+//     }
 
-    render() {
-        return (
-            <section>
-                {this.props.children}
-            </section>
-        )
-    }
-}
-const routes = {
-    path: '/',
-    component: App,
-    indexRoute: {component: PageOne},
-    childRoutes: [
-        {path: '/pageTwo', component: PageTwo}
-    ]
-};
-ReactDOM.render(<Router history={hashHistory} routes={routes}/>, document.getElementById('app'));
+//     render() {
+//         return (
+//             <div>
+//                 1111sdfd333dsfdsfa
+//             </div>
+//         )
+//     }
+// }
+ReactDOM.render(<PageOne />, document.getElementById('app'));

src/pages/PageOne/PageOne.js

@@ -18,7 +18,7 @@ class PageOne extends Component {
     	const t = this;
         return (
             <div className="pageOne">
-                <div className="title">这是pageOne~</div>
+                <div className="title">这是pageOne2222~</div>
                 <a href="#/pageTwo">下一页</a>
                 <div className='title'>
                 	{t.state.data && t.state.data.total_count}

webpack.config.js

@@ -1,69 +1,98 @@
+const { resolve } = require('path');
 const webpack = require('webpack');
-const OpenBrowserPlugin = require('open-browser-webpack-plugin')
 
 const config = {
     devtool: 'eval-source-map', //开发环境使用;线上环境请禁用
     entry: {
-        app:__dirname + '/src/app/app.js',
-        app2: __dirname + '/src/app/app2.js',     // 多个入口文件打开本选项。
-        vendor:['react','react-dom','react-router']
+        app:[
+            'react-hot-loader/patch',
+            'webpack-dev-server/client?http://localhost:8081',
+            'webpack/hot/only-dev-server',
+            __dirname + '/src/app/app.js'
+            ]
+        // app2: __dirname + '/src/app/app2.js',     // 多个入口文件打开本选项。
+        // vendor:['react','react-dom','react-router']
     },
     output: {
         path: __dirname + '/dist',
         filename: '[name].js'
     },
-
+    context: resolve(__dirname, 'src'),
     devServer: {
         contentBase: './test',      //本地服务器所加载的页面所在的目录
-        inline: true,               //设置为true，当源文件改变时会自动刷新页面
+        // inline: true,               //设置为true，当源文件改变时会自动刷新页面
         port: 8081,                 //设置默认监听端口，如果省略，默认为8080
         historyApiFallback: true,   //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
-        colors: true,               //设置为true，使终端输出的文件为彩色的
         hot: true,                  //是否热部署
-        quiet: false                 //让dev server处于静默的状态启动
+        quiet: false,               //让dev server处于静默的状态启动
+        stats: {
+            colors: true, // color is life
+            chunks: false, // this reduces the amount of stuff I see in my terminal; configure to your needs
+            'errors-only': true
+        }
     },
 
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.js[x]?$/,
-                exclude: /node_modules/,
-                loader: 'babel'
+                use:[
+                    {
+                        loader:'babel-loader'
+                    }
+                ],
+                exclude: /node_modules/
             },
             {
                 test: /\.css$/,
-                //loader: 'style!css?modules!postcss'
-                loader: 'style!css!postcss'
+                use: [
+                    'style-loader',
+                    'css-loader',
+                    'postcss-loader'
+                ]
             },
             {
                 test: /\.scss$/,
-                //loader: 'style!css?modules!sass!postcss'
-                loader: 'style!css!sass!postcss'
+                use:[
+                    'style-loader',
+                    'css-loader',
+                    'sass-loader',
+                    'postcss-loader'
+                ]
             },
             {
                 test: /\.(png|jpg)$/,
-                //loader: 'style!css?modules!sass!postcss'
-                loader: 'url-loader?limit=8192'
+                use: [
+                    {
+                        loader:'url-loader',
+                        options:{
+                            limit:8192
+                        }
+                    }
+                ]
             }
         ]
     },
-
-    postcss: [
-        require('autoprefixer')//调用autoprefixer插件
-    ],
+    // 是否监听文件变化，默认false,如果开启web-dev-server,则默认true
+    watch: true,
+    // 运行环境
+    target:'web',
+    // postcss: [
+    //     require('autoprefixer')//调用autoprefixer插件
+    // ],
     plugins: [
-        new OpenBrowserPlugin({ url: 'http://localhost:8081' }), //打包完成后自动打开浏览器
+        new webpack.NamedModulesPlugin(),
         new webpack.HotModuleReplacementPlugin(),           //热加载插件
-        new webpack.NoErrorsPlugin(),                       //允许错误不打断程序
+        new webpack.NoEmitOnErrorsPlugin(),
         new webpack.DefinePlugin({
           __LOCAL__: true,                                  // 本地环境
           __PRO__:   false                                  // 生产环境
         }),
-        new webpack.optimize.CommonsChunkPlugin(            //将公共模块打包
-            /* chunkName= */'vendor', 
-            /* filename= */'vendor.js'
-        ),
+        // new webpack.optimize.CommonsChunkPlugin({
+        //     name:'vendor',                                  //将公共模块打包
+        //     filename:'vendor.js'
+        // }),
     ]
 };
 
-module.exports = config;
+module.exports = config;