使用webpack4 + react + react-router + mobx + antd + axios + eslint 從零配置的react全家桶項目，
主要實現：
- react-router 配合 react-loadable 實現按需加載
- mobx 實現狀態管理
- axios 前後端數據交互
- eslint 代碼規範檢測
- less 書寫 style 樣式
- react-html-attrs 插件使用class 替換掉 className
- babel-plugin-import antd 組件的按需加載
- webpack4 splitChunks 實現代碼拆分，常用靜態資源包拆分並緩存
- webpack4 minimizer 中配置 壓縮js，css 代碼
- webpack-bundle-analyzer 插件實現代碼打包分析
- webpack-dev-server proxy 實現代理（也可以再config/env.js中配置）
- 區分 開發，測試，生產，三個不同環境，不同環境可以配置不同變量
克隆下來，刪除我寫的demo 後可以直接使用， 如果想使用 sass 需要自行安裝並配置
github 項目地址
項目簡介
webpack 版本和主要依賴包版本
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"antd": "^4.1.0",
"axios": "^0.19.2",
"mobx": "^5.15.4",
"mobx-react": "^6.1.8",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-loadable": "^5.5.0",
"react-router-dom": "^5.1.2"
目錄簡介
--build/
|-build.js // 執行npm run build 打包命令執行文件入口
|-utils.js // webpack 配置中提取的公共方法
|-webpack.base.config.js // webpack 公共基礎配置
|-webpack.dev.config.js // webpack 開發環境配置
|-webpack.prod.config.js // webpack 測試正式打包配置
--config/
|-env.js // 開發測試生產，不同環境配置的全局變量
--src/
|-assets
|-images // 圖片
|-less // 全局less，less變量文件
--router/
|-loadable.js // react-loadable 按需加載插件封裝
|-router.config.js // 測導航欄數據文件
|-router.js // 路由配置文件
--store/
|-index.js // mobx全局狀態文件
--utils/
|-request.js // axios 全局攔截器配置文件
--views/ // 項目頁面目錄
--app.less // 全局樣式
--main.js // 項目入口文件
--static // 靜態資源目錄
使用
項目clone 到本地
git clone https://github.com/dadanihoutao/react-project.git
安裝依賴
npm install
運行
npm run dev
打包測試
npm run build-test
打包正式
npm run build
打包後模塊分析(打包完成後會自行打開瀏覽器)
npm run analyz
版本問題
這個項目使用的是react 比較高的版本，
裏邊用到了很多react 的新特性，比如生命週期方法已經更改爲
componentWillMount → UNSAFE_componentWillMount
如果安裝好依賴後瀏覽器控制檯出現警告 提示 componentWillMount 已經廢棄，使用 UNSAFE_componentWillMount 新版生命週期函數，可以參考下邊的文章進行修改
react中項目componentWillMount警告
[譯]React v16.9 新特性
或者降低react 版本，但是就不能使用react 的新特性了。
詳細介紹
此項目到此爲止一共有6個版本號，之所以要打這麼多版本號，是爲了方便其他同學借鑑或者學習，每個版本都是配置好一些主要功能後，打了一個版本號，想學習的同學可以，從v.1.0.1 版本開始下載，查看配置。配置文件中有比較詳細的註釋。具體的配置過程這裏就不詳細敘述了。網上比較好的教程還是比較多的，我在搭建的過程中也參考了很多網絡上的博客教程。最後會附上參考鏈接
tag 連接
v.1.0.5 之前是沒有配置eslint 的，如果不想使用eslint 的同學，可以下載 v.1.0.4 使用
預計以後還會有一個版本，v.1.0.6 這個版本會把所有的配置文件中的註釋刪除掉，乾淨清爽，以後如果開發react 項目就省去了搭建的時間，可以直接使用了。
如果不想使用mobx ，喜歡使用redux 的話，需要自己配置，這裏有一篇參考博客，寫的比較詳細，可能以後有時間，我也會再搞一個redux 版本的
react+redux+router+webpack+antd環境搭建一版
用webpack4從零開始構建react腳手架
上邊的這篇文章也是使用的redux。配置redux 的話可以參考借鑑
寫在最後
因爲 webpack 更新比較快，webpack中文網的文檔已經沒有更新了，裏邊的內容還是webpack3版本的，但是官網上的版本好卻是 4.42.1 的，剛開始閱讀的時候沒有發現，稍微往後發現了好多坑。就直接放棄這個文檔了。後來找到一篇 印記中國 翻譯的最新的webpack4 的文檔，雖然裏邊也有幾個小坑，但是絕對是現在市面上webpack4中文翻譯最好的文檔了，英語不好的小夥伴可以閱讀這個文檔，來學習webpack4 的知識。這裏放個連接：
webpack4 最新中文文檔, 印記中國翻譯
我是閱讀完中文文檔以後開始搭建的，其中也在網上參考了很多資料，包括vue-cli2 搭建的項目中 webpack 的配置，熟悉vue 的同學，應該能發現，項目配置目錄也是借鑑的 vue-cli2 生成的webpack3 的配置（vue-cli2 生成的webpack3 的配置因爲是尤老大寫的，還是有很多值得參考的地方的）
本文參考鏈接
主要參考下邊的這篇博客，一共有5章，每一步配置寫的都很詳細，webpack 初學者，可以根據這篇文章從零配置搭建
react+webpack4搭建前端項目（一）
eslint 中文網
react+eslint 配置
eslint中文網 可以查閱所有的eslint 基本配置，可以根據自己喜歡的規則去配置
webpack 4 搭建 React 架構：實現熱更新（二）
最後附上幾篇非常精簡的webpack4 的相關文章，用來快速學些入門