webpack＋react 從零構建簡單架構

第一步：安裝node服務器

　　webpack的操做都是基於node服務器來執行，因此要安裝一個全局的node服務器，安裝方法參考官網，也能夠先安裝nvm(node服務器的版本管理工具)。我我的環境安裝了nvm 因此在這說一下nvm運行node的方法，安裝好nvm和node以後，cd來到本身的項目（我創建的項目名是react-test）運行nvm ls會把你全部的node版本列舉粗來，想用用哪一個版本運行nvm use 版本號（例：nvm use v7.6.0）此刻能夠用node服務器作開發了。

第二步：安裝package.json

     以後的操做都須要在你的項目目錄下運行，npm是一個基於Node的包管理工具，項目會依賴不少大大小小的npm包，因此須要有package.json這樣一個文件來記錄依賴的包和包版本號，也會存放自定義的腳本任務稍後會提到。在當前目錄下運行npm init創建package.json，創建的時候會詢問你package的名稱、版本和描述等，直接按回車就能夠，最後輸入yes在你的項目根目錄下生成一個package.json的文件，若是嫌問題不少麻煩直接運行npm init --yes便可生成。

第三步：初步配置webpack和react

     首先安裝webpack和react 當前目錄下運行npm install --save-dev webpack，npm install --save-dev react react-dom react-router運行成功後會在根目錄下生成一個node_modules文件夾，這個文件夾是將來放置npm安裝的全部的包。package中也會記錄下（這樣有個好處就是當你在移植你的項目的時候，拷貝node_modules文件夾會很費時間，不用拷貝，有package.json的前提下運行npm install就能夠把全部的依賴包從新下載下來）。　　

     如今把主要的依賴的包安裝好了，先創建項目目錄架構以下

react-test
  src
    index.html
    router
      app.js
　　　 login
　　　　 login.js
　　     login.less
      main
        main.js
        main.less

  node_modules
  package.json

index.html是入口頁面，整個開發就一個html文件，用來引入打包後的js文件等。

app.js是入口文件。

login和main文件夾都是項目開發的模塊，好比登陸模塊，主模塊