基於webpack 3.x + react v16 + antdesign開發環境配置

基於webpack 3.x + react v16 + antdesign開發環境配置

原文連接：基於webpack 3.x + react v16 + antdesign開發環境配置

說明

這篇文章比較適合剛入門react或者webpack的同窗，目的爲了減小你們在學習如何配置webpack開發環境時花費的大量時間。

學習一個新的開發模式對於功底不是很厚的同窗來講是有必定的技術難度的，尤爲在配置一些複雜的開發環境時顯得很是疲軟，新手應該更專一於學習新的技術棧，而不是投入大量的時間精力在工具上。所以我結合本身的開發經驗，配置了一份比較完整的react開發配置，但願可以給同窗們提供一個溫馨的環境，在本身有能力配置一套完整的開發環境時，最好仍是回過頭配置一份屬於你本身的開發環境。

本開發環境採用使用了以下產品：

• webpack 3.x
• react （版本不限制）
• ant design（螞蟻金服的基於react開發的一套UI庫，很是棒，力推）

配置地址

https://github.com/MeteDesign/Webpack

該庫具備兩個分支，分別是master和antdesign，詳細差異將會在下面的分支說明部分解釋。

安裝

$ git clone https://github.com/MeteDesign/Webpack.git
$ cd Webpack
複製代碼

在下載好以後，須要安裝下依賴文件：

$ yarn
複製代碼

或者

$ npm install
複製代碼

**切記：請在開始你的項目以前，請先運行 npm run generdll，該命令是爲了生成DLL文件，提高開發環境的編譯速度 **

開發環境

$ npm run dev
複製代碼

生產環境

$ npm run build
複製代碼

運行該命令以後，你將會在根目錄看到一個dist文件夾，若是須要部署，請將它放到你的服務器上。

分支說明

master

該分支是一個比較基礎的react開發環境，項目架構比較單一，適合剛入門的同窗使用。

說明

當你運行npm run dev，而後在瀏覽器上輸入 localhost:4000，若是你看到以下圖所示的界面，那麼恭喜你，能夠繼續你的學習之旅。若是報錯，請以issues的形式向我報告，有時間我會第一時間回覆你。

特性

在該配置下，你可以使用如下的特性

• 公共chunk抽取
• DLL 支持
• 提取css到一個單一文件中
• 多入口文件支持
• 熱替換支持
• 長期緩存支持
• Postcss 支持
• sass/less/css css預處理器支持
• 壓縮優化代碼支持
• ...

更多的特性請前往 webpack.config.js查詢。

antdesign

該分支適配了ant design ui庫，是一個比較完整的開發環境，項目架構基本完善，適合已經入門，想要一些更高層次的調整的同窗。

說明

當你運行npm run dev，而後在瀏覽器上輸入 localhost:4000，若是你看到以下圖所示的界面，那麼恭喜你，能夠繼續你的學習之旅。若是報錯，請以issues的形式向我報告，有時間我會第一時間回覆你。

當你輸入 localhost:4000/login.html, 你會看到以下所示的登陸頁面，一樣若是有錯，請向我提issues。

該配置文件使用了多入口文件，分別是main和login，若是使用過ant-design-pro的同窗不難會發現，樣式很是類似。在搭建項目時，我參考了 ant-design-pro的設計風格。可是在側邊欄部分，我添加了代碼使得側邊欄不會隨着頁面滑動而變化。

特性

在該配置中，你可以使用到如下特性：

• 公共chunk抽取
• DLL 支持
• 懶加載支持
• 提取css到一個單一文件中
• 多入口文件支持
• 熱替換支持
• 長期緩存支持
• Postcss 支持
• sass/less/css css預處理器支持
• 壓縮優化代碼支持
• ...

更多的特性請前往 webpack.config.js查詢。其中懶加載功能請按照commom/nav.js中所示，添加你的路由文件來實現懶加載功能。

但願你們可以批評指出，共勉。