webpack + react 前端工程化實踐和暫不極致優化

技術結構

webpack + react + react-router

功能實現

關於打包

1.基於react-router的自定義打包code split。
2.分包異步按需加載。
3.CommonsChunkPlugin公共代碼打包提取。
4.ParallelUglifyPlugin多線程代碼壓縮。
5.HappyPack多線程loader任務處理。
6.webpack tree shaking

開發模式

1.express + webpack-dev-middleware + webpack-hot-middleware 本地開發服務器和文件修改熱加載及實時刷新。
2.mock數據，data.json進行接口和模擬數據配置，實時生效。
3.基於nodejs的http模塊，實現本地服務器http請求代理轉發，開發模式下直接請求測試環境或線上RESTfull api接口。

業務功能支持

1.基於react-router的頁面跳轉控制
2.可配置的多級菜單組件
3.基於cookie的權限控制功能
4.客戶端http請求封裝
5.引入element-react、antd兩個經常使用ui組件庫(對element-react作了通用代碼抽離，antd作了組件按需加載)
6.集成less

使用說明

安裝npm依賴

npm i --save

開發模式啓動(使用data.json mock數據)

npm run dev

開發模式啓動(使用代理轉發)

修改'build/proxy.js'的http option配置(hostname屬性和header自定義配置) npm run dev --pxy 

生產環境打包

'build/config.js'可對打包入口和輸出路徑作配置。 npm run build 

git地址：https://github.com/IveHD/web-project-go