一個 React 的專案中我們需要什麼樣的函式庫？

1. React.js core library
2. React DOM library

這次不僅學習 React ，還要學習 Modular 的 coding style，所以這次就選用 webpack 來操作

安裝 React

在新專案裡面下指令

$ npm init

輸入 package.json 相關初步設定，跑完之後便會產生一個 json 檔案，紀錄你剛剛所輸入的資訊。

接著安裝 React 和 React-DOM

--save 說明這是 production dependencies（產品依賴模塊），可以省掉你手動修改package.json文件的步驟

$ npm install react react-dom --save

安裝 Webpack

接下來安裝 webpack，同時我要用 Babel 開發，因此也一併載了所有 Babel 需要的進來

webpack-dev-server 是一個小型的 Node.js Express 服務器,它使用 webpack-dev-middleware 來服務於 webpack

babel-loader 是將 Babel 裡的 ES6 語法轉換成 ES5 語法的 transpilier。

babel-preset-es2015 定義你可以使用的 ES6 commands，它定義了 transpilier 需要的邏輯，因此要一併載入

另外，React 也有在 Babel 中的專屬邏輯，因此要載 babel-preset-react

$ npm install webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 --save-dev

當我們把需要用到的工具都架設完畢之後，就是開始整理資料夾結構的時刻了！

初始設定

先在你的專案下新增一個 src 資料夾，再新增一個 app 資料夾，之後 ReactJS code 就是放在這邊囉～
接著在 app 資料夾中新增一個檔案

在 src 裡面新增一個 webpack.config.js 的資料夾，我們可以在這個資料夾裡面設定 config webpack

path 是 Node.js 的預設 library

var DIST_DIR = path.resolve(__dirname, "dist"); 

這行表示複製所有東西到 dist 這個資料夾，雖然這個資料夾還不存在，不過之後他會自動產生。
但是你要怎麼知道被 compile 前的原始碼長怎麼樣？這時就要定義

var SRC_DIR = path.resolve(__dirname, "src");

OK! 設定完畢之後我們需要再定義一個變數 config 指定 webpack 的配置

1. 設定 entry point
   告知 webpack 第一個該讀取的資料夾，該從哪個點開始轉譯 (Transpiling) 和綁定 (bundling)。
   因為 webpack 的邏輯是，它可以有一個或多個 entry files，而它會透過每個檔案最上面定義的 import status 去判斷資料夾之間的相依性 (dependence)。
   在這邊我只設定一個 entry point，就是剛剛在 app 資料夾底下的 index.html，這會是我的根目錄，定義完畢之後，webpack 便會將這個檔案作為出發點。

2.設定 output
定義 webpack 產出 output 之後要放的路徑、檔案名稱

module.exports = config;

這個定義的 JS 物件會被 exports，webpack 就會進到 config 變數裡面，讀取我們在裡面所定義的 config

完整的 webpack.config.js

var path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist"); //where to copy it
var SRC_DIR = path.resolve(__dirname, "src"); // where to see uncompiling code

var config = { //holds the webpack configuration
  entry:  SRC_DIR + "/app/index/html",//tell webpack which file you should start your transpiling and building your journey in
  output: {         //tell webpack where to output everything we create
    path: DIST_DIR + "/app",
    filename: "bundle.js",
    publicPath: "/app/"
  },
  module: {
    loaders: [
      {
        test: "/\.js?/"        //tell webpack which file should it test
        include: SRC_DIR,
        loader: "babel-loader",
        query: {
          preset: ["react","es2015","stage-2"]
        }
      }
    ]
  }
}

module.exports = config;

設定完 webpack config 之後，我們就可以來操作應用程式啦！