題注：歡迎加入阿里南京前端團隊，歡迎關注阿里南京技術專刊瞭解更多訊息。
React & Webpack Boilerplate V4
React & Webpack Boilerplate V4 是筆者前端常用模板集錦專案 fe-boilerplate 的一部分，儘可能地使用無異議的工具，提供直觀且簡潔明瞭的方式；相較於 create-react-app，具有更好的可配置性與適應性，適合於中長期專案。支援最新的 Webpack 4 & React 16.3 版本，如果需要引入 TypeScript 支援，可以借鑑 react/webpack-ts 這個模板。
為了保證專案的純粹性，將原本 React Router，Redux，MobX 等常見的技術框架的使用遷移到了 fe-boilerplate 的其他模板專案中。也可以查閱 Webpack CheatSheet，或者 React CheatSheet、現代 Web 開發基礎與工程實踐 瞭解更多 Web 開發實踐的知識。
配置與使用
下載或者克隆 fe-boilerplate，並且進入 react/webpack 子目錄：
# 安裝依賴
$ cnpm install
# 僅啟動 Web 開發伺服器
$ npm run dev
# 啟動 Web 開發伺服器與 Mock 伺服器
$ npm start
# 啟動 Storybook 服務，在進行元件開發時使用
$ npm run storybook
# 編譯為可釋出的包體
$ npm run build
# 使用 *.umd.* 配置檔案，編譯為庫
$ npm run build:lib
# 執行 ESLint
$ npm run lint
# 執行包體分析
$ npm run analyze
複製程式碼如果我們是進行的多頁面應用開發，那麼可以在 webpack.config.base.js 檔案中新增更多的 Entry 與 HtmlWebpackPlugin 配置。
技術棧
-
樣式
- 支援使用 CSS Modules/SCSS/Less 等 CSS 模組化解決方案，對於潛在的類名過長導致的冗餘包體等問題可以參考 babel-plugin-jsx-nested-classname。
- 示例程式碼使用了 styled-components 作為 CSS-in-JS 庫。
- 使用 PostCSS 作為 CSS 程式碼的後置 Polyfill 以及語法轉換支援，詳見 postcss.config.js 中的配置。
-
約束
- 使用 Prettier 作為程式碼格式化工具。
- 強烈建議使用 ESLint 進行程式碼風格控制，可以使用 vscode-eslint 外掛以獲得更好的開發體驗；ESLint 規則推薦使用 eslint-config-airbnb。
- 可以使用 vscode-import-formatter 等格式化工具處理程式碼的細節風格，譬如引用順序等問題。
-
測試
-
計算
- 使用 workerize-loader 提供便捷的 Web Worker 計算支撐，可以參考 DOM CheatSheet 獲取更多內容。
開發態特性
- 熱載入
- 使用內建的 Webpack DevServer 作為開發伺服器。
- 使用 React Hot Loader V4 提供 React 元件熱載入的能力。
- 構建優化
- 使用 DllPlugin 作為開發環境下公共程式碼提取工具以優化編譯速度生產環境。
- 可以考慮使用 HappyPack, parallel-webpack 等工具提升 Webpack 的並行處理能力。
釋出態特性
- 程式碼分割，Webpack 4 移除了 CommonChunksPlugin，替換以 optimization 與 splitChunks 配置項，詳細配置參考 webpack.config.prod.js。
- PWA 特性，使用 offline-plugin 新增便捷的 PWA 支援。
- 服務端渲染，詳見 ssr/server。
- 程式碼優化，使用 Prepack & prepack-webpack-plugin 進行程式碼優化。