見知乎文章
寫在前面：使用的工具是iTerm命令行工具和Atom代碼編輯器。

1. 項目效果

TBD

2. 創(chuàng)建項目并初始化

$ mkdir webpack-react-demo
$ cd webpack-react-demo
$ npm init
$ touch .gitignore
$ touch webpack.config.js

其中.gitignore用于說明代碼提交時忽略的文件，可參考下面的常用配置

logs
*.log
.grunt
node_modules
bower_components
build

3. 通過npm安裝項目所需的依賴包

• webpack相關(guān)包

$ npm install webpack webpack-dev-server html-webpack-plugin --save-dev

• css\scss樣式文件，圖片文件相關(guān)包

$ npm install css-loader style-loader sass-loader node-sass --save-dev
$ npm install file-loader url-loader --save-dev

• babel\react\es6支持包

$ npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
$ npm install jshint jshint-loader --save-dev
$ npm install react react-dom --save
$ npm install bootstrap@4.0.0-alpha.2 --save-dev

• bootstrap\jquery\moment支持包

$ npm install bootstrap@4.0.0-alpha.2 --save-dev
$ npm install jquery moment --save-dev

4. 創(chuàng)建工程結(jié)構(gòu)，目錄如下：

• app/

• index.jsx (程序入口)
• components/ (組件文件夾)
  • plist.jsx （展示用戶列表）
  • search.jsx （搜索框組件）
• utils/ (工具類)

• templates (模版文件夾)

• index.html
• mobile.html

• package.json (項目及npm包版本信息)
• webpack.config.js (webpack配置文件)

5. 配置webpack

向webpack.config.js文件寫入一下內(nèi)容：

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var TEM_PATH = path.resolve(ROOT_PATH, 'templates');

module.exports= {
  entry: {
    app: path.resolve(APP_PATH, 'index.jsx'),
    mobile: path.resolve(APP_PATH, 'mobile.jsx'),
    vendors: ['jquery', 'moment']
  },
  output: {
    path: BUILD_PATH,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  //啟動dev source map，出錯以后就會采用source-map的形式直接顯示你出錯代碼的位置。
  devtool: 'eval-source-map',
  //enable dev server
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    //只要配置dev server map這個參數(shù)就可以了
    proxy:{
      '/api/*':{
        target: 'http://localhost:8080',
        secure: false
      }
    }
  },
  //babel重要的loader在這里
  module: {
    //loader前執(zhí)行處理，這樣每次npm run start的時候就可以看到j(luò)shint的提示信息
    preLoaders: [
       {
         test: /\.jsx?$/,
         include: APP_PATH,
         loader: "jshint-loader"
       }
     ],
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: APP_PATH,
        query: {
          //添加兩個presents 使用這兩種presets處理js或者jsx文件
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }
    ]
  },
  //配置jshint的選項，支持es6的校驗
   // any jshint option http://www.jshint.com/docs/options/
   jshint: {
     "esnext": true
   },
  plugins: [
    //這個使用uglifyJs壓縮你的js代碼
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    new HtmlwebpackPlugin({
      title: 'My first react app',
      template: path.resolve(TEM_PATH, 'index.html'),
      filename: 'index.html',
      chunks: ['app', 'vendors'],
      inject: 'body'
    }),
    new HtmlwebpackPlugin({
      title: 'Hello Mobile app',
      template: path.resolve(TEM_PATH, 'mobile.html'),
      filename: 'mobile.html'
    }),
    //把入口文件里面的數(shù)組打包成verdors.js
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
  ]
}

6.npm中添加webpack啟動命令

在package.json文件中添加：

  ...
  "scripts": {
    "dev": "webpack-dev-server --progress --profile --colors --hot --inline",
    "build": "webpack --progress --profile --colors",
    "test": "test",
  },
  ...

分享下我通過npm安裝的包版本信息

...
"devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "bootstrap": "^4.0.0-alpha.2",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.7.2",
    "jquery": "^2.2.0",
    "jshint": "^2.9.1",
    "jshint-loader": "^0.8.3",
    "moment": "^2.11.1",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "react": "^0.14.6",
    "react-dom": "^0.14.6"
  }
...

7. 添加首頁

7.1 寫入index.jsx

import '../node_modules/bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

class App extends React.Component{
    constructor() {
        super();
    }
    render() {
        //JSX here!
        return (
          <div className="container">
            <section className="jumbotron">
              <h3 className="jumbotron-heading">Search Github Users</h3>
            </section>
          </div>
        )
    }
};

const app = document.createElement('div');
$('body').append(app);
ReactDOM.render(<App />, app);

7.2 運行webpack查看效果

npm run dev 如下所示說明Babel和Bootstrap正確使用了。

首頁

4. 添加React Transform支持，實現(xiàn)熱加載

• 隆重推出Babel-plugin-react-transform 名字挺長, 看起來挺嚇人，其實你就可以想象用這個東西可以實時的對你的React Component做各種處理，它是基于Babel Plugin。

• 這是個基本的架子，可以通過它完成各種transform，如果想實現(xiàn)Hot Module Replacement (說白了就是頁面不刷新，直接替換修改的Component)，再安裝react-transform-hmr。再來一個在頁面上直接顯示catch到的錯誤的transform。要讓新建的兩個transform生效,只需再安裝一個present。

• 安裝

npm install babel-plugin-react-transform --save-dev`
npm install react-transform-hmr --save-dev
npm install --save-dev react-transform-catch-errors redbox-react
npm install babel-preset-react-hmre --save-dev

• 將支持HMR和Catch Error的present添加到.babelrc

{
  //添加兩個presents 使用這兩種presets處理js或者jsx文件
  presets: ['es2015', 'react'],
  //在開發(fā)的時候才啟用HMR和Catch Error
  "env": {
     "development": {
       "presets": ["react-hmre"]
     }
  }
}

• 啟動npm run dev，修改h3的顏色，可以看到效果如下
  
  首頁