從零開始搭建基于React的SPA應用
前言
最近幾年，前端變化非常大，各種新架構應接不暇。從原始的html、css、js基礎開發，到現在前端的子產品化、工程化，旨在建構出易于維護的前端系統。目前，前端主要有三大架構：React、Vue、Angular。本文将學習如何從零開始搭建一個基于React的前端spa應用。
在開始學習之前，你需要安裝node.js，同時對以下知識有所了解：
1.原生js、css、html基礎；
2.npm包管理器基礎；
3.webpack4打包工具基礎；
4.es6标準規範；
5.less預處理器基礎；
以上知識點也是目前學習其他前端架構所必須了解的。如果你還未了解，建議你先了解之後再繼續下面的文章。
在文章中，會介紹基本的loader，如處理jsx js的babel-loader，處理css less的css-loader和less-loader，處理靜态資源檔案(png jpg gif等)的url-loader，以及做css相容處理的postcss-loader，然後會介紹一些插件，比如并行壓縮代碼插件，css壓縮插件。
yarn安裝
在本文學習，以及你以後實際開發工作中，可能涉及到很多包的安裝，強烈建議使用yarn來安裝包(用npm安裝包也是一樣的)。yarn是Facebook提供的替代npm的工具，可以加速 node子產品的下載下傳，跟npm相比，yarn的速度更快。
安裝yarn
npm install -g yarn
如果此處使用npm安裝太慢，可以切換鏡像，比如淘寶鏡像。
yarn的使用
初始化項目
yarn init
等價于npm init
添加新的依賴包
yarn add [package] 添加到dependencies，等價于npm install [package] –save
yarn add [package] --dev 添加到devDependencies，等價于npm install [package] --save-dev
更新依賴包
yarn upgrade [package]
移除依賴包
yarn remove [package]
安裝項目中全部依賴包
yarn 或 yarn install
webpack介紹
webpack是一個用于現代js 應用程式的靜态子產品打包工具。通過import 或 require方式可以導入子產品，export 或 exports可以導出子產品。打包時，webpack會找到項目的入口點，一直找通過import等方式導入的子產品，打包到一起，最後輸出html+css+js+png等靜态檔案。
這是webpack官網的描述圖。從左上角的入口檔案開始，webpack一直尋找項目中所有的依賴，最終打包成右側的靜态資源。
目錄結構
項目目錄
項目搭建
現在，我們可以開始搭建我們的項目了。
先在你電腦的合适位置建立一個檔案夾share-demo（檔案名可以随便起），作為項目根目錄。然後在目前檔案夾下打開終端輸入指令yarn init初始化項目，一路回車，最後應該會在項目目錄下出現package.json檔案。package.json檔案裡，一般記錄了項目的配置資訊，包括名稱、版本、許可證等，也會記錄所需的各種子產品，包括生産依賴和開發依賴等。
在根目錄下建立index.html檔案、.babelrc檔案、src檔案夾、build檔案夾。
index.html檔案為打包後的html輸出模版，如下：
.babelrc檔案包含babel的一些基礎配置，我們項目最終的檔案為：
然後安裝webpack、webpacl-cli、webpack-merge。webpack-merge包是合并webpack檔案的，後面你會看到它的使用。
yarn add webpack webpack-merge –dev
再在build檔案夾下建立webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js，src檔案夾下建立index.jsx、index.less。
index.jsx為webpack打包時的入口檔案，也即為整個項目的入口檔案。
三個webpack檔案的基礎内容為：
在這裡，我把webpack的配置檔案進行了拆分，實際項目中可拆可不拆。
webpack.base.conf.js為基礎的、項目所必須的一些配置，比如入口、出口的配置，基礎loader的配置，html模版輸出的配置等，這些配置不論是開發環境還是生産環境，都是必須的。
webpack.dev.conf.js為開發環境的配置，包含mode、devtool，同時還包括針對開發環境不同的loader配置，比如開發環境中的熱更新和熱替換配置。
webpack.prod.conf.js為測試環境的配置，它和webpack.dev.conf.js的差別就是，前者在實際的生産環境中使用，後者在開發環境中使用。同樣包含mode、devtool，同時還包括針對生産環境的loader配置，比如生産環境中對打包後的css檔案進行了分離和壓縮等。
你肯定在後兩個檔案裡發現了我們前文提到的webpack-merge。對，webpack-merge的使用就是如此的簡單。
現在webpack還不能跑，jsx、html檔案沒有處理，css、less、png、jpg等也未處理。
處理react的jsx檔案，我們需要使用到babel-loader，安裝babel相關的包：
@babel/core babel核心
@babel/preset-react 轉換jsx文法
@babel/preset-env 轉換es6文法
@babel/plugin-transform-tuntime 複用插件
@babel/runtime
babel-polyfill 轉換es6的新函數或對象，如promise，set，map等
使用yarn安裝以上包和babel-loader包。
yarn add @babel/core @babel/preset-react @babel/preset-env @babel/plugin-transform-runtime @babel/runtime babel-polyfill babel-loader --dev
還要處理html模版檔案，需要html-loader和html-webpack-plugin插件。
yarn add html-webpack-plugin html-loader –-dev
處理css、less檔案需要用到style-loader、css-loader、less-loader。
yarn add style-loader css-loader less-loader –-dev
處理png、jpg、gif等需要用到url-loader。
yarn add url-loader –-dev
之後，再分别修改webpack的三個檔案如下：
好了，現在我們的webpack能處理一些基礎檔案了，接下來終于要安裝react,、和react-dom了。
yarn add react react-dom –save--dev
然後修改src/index.jsx如下：
src/index.less如下：
到這裡你會發現，所有的工作好像都做完了，但怎麼讓我們的代碼運作起來呢？那就需要使用webpack-dev-server。
安裝webpack-dev-server。
yarn add webpack-dev-server --dev
在這裡，我也把webpack-dev-server的配置分離了出來。在build目錄下建立dev-server.js、ip-config.json、port.json檔案。
檔案依次如下：
現在，萬事俱備，隻欠打包。
在package.json裡添加腳本，并看下package.json檔案：
執行npm start指令，等同于npm run start指令，然後我們看下控制台輸出。
當看到Compiled successfully說明我們的服務已經啟動成功。
此時浏覽器位址欄裡鍵入
https:localhost:8080，你應該能看到以下頁面：
至此，你已經基本完成了一個基礎的基于react的spa應用搭建。
但是，還有一些需要優化的部分。
優化
熱更新和熱替換
不知你是否注意到，在build/dev-server.js檔案裡有個參數hot。此參數為true時即可打開熱更新功能，但實際上現在當你修改index.jsx時，頁面并沒有重新整理，因為你還需要你在webpack配置檔案裡做一下修改。
編輯webpack.dev.conf.js檔案：
此時再修改src/index.jsx，浏覽器頁面就會自動重新整理了。
使用postcss
簡單來說postcss就是做css轉換和相容處理的，比如自動添加css字首，還能轉換最新的css屬性。
安裝postcss-loader和autoprefixer。
yarn add postcss-loader autoprefixer –dev
繼續修改webpack.dev.conf.js和webpack.prod.conf.js檔案如下：
這樣能保證當我們打包完畢後，html檔案中css的插入位置會自動添加适配浏覽器的字首，而無需我們手動操作。
分離和壓縮css
在實際的生産環境中，需要盡可能的壓縮css，同時需要把css内容從js檔案裡分離出來，以加快系統的啟動速度，提高性能。這裡需要用到mini-css-extract-plugin和optimize-css-assets-webpack-plugin，先安裝這兩個包。
yarn add mini-css-extract-plugin –dev
yarn add optimize-css-assets-webpack-plugin –dev
然後修改webpack.prod.conf.js檔案如下：
注意，style-loader要删除，替換成MiniCssExtractPlugin方法。
還有很多其他的優化方式，後期可根據實際項目去配置和修改。
至此，項目的搭建工作已經基本完成，剩下的還需你繼續學習。