一、確定項目技術棧
React 技術棧：react 16、redux、react-router-v4、redux-saga
UI 框架：antd
構建工具：webpack 4
二、webpack 基礎配置及相關包的安裝
// 初始化 package.json
npm init
// 安裝 webpack、webpack-dev-server、webpack-cli
npm i --save-dev webpack webpack-dev-server webpack-cli
// webpack.config.js
module.exports = {
entry: '', // 入口文件
output: {}, // 打包出口文件
module: {}, // 處理對應模塊
plugin: [], // 對應的插件
devServer: {} // 開發服務器配置
}
基礎 Loaders：
// 轉義 ES6
npm i babel-core babel-loader babel-preset-env -D
// 轉義 react
npm i babel-preset-react -D
// 解析 CSS 樣式 loader
npm i style-loader css-loader -D
// 引入 less 文件的話，也需要安裝對應的 loader
npm i less less-loader -D
// 處理圖片 loader
npm i file-loader url-loader -D
// 頁面 img 引用圖片
npm i html-withimg-loader -D
基礎 Plugins：
// 配置 HTML 模板
npm i html-webpack-plugin -D
// 抽離 CSS
npm i mini-css-extract-plugin -D
// 每次打包之前將dist目錄下的文件都清空
npm i clean-webpack-plugin -D
? 具體細節配置請參考文章：webpack4-用之初體驗，一起敲它十一遍
三、mock 數據
根據后端定義的接口，前端可以自己 mock 數據進行開發，從而使前后端開發更加高效。
mock 數據可以通過兩種方式實現：
（1）啟動 mock server，配置 devServer 的 target 進行請求轉發實現數據 mock（一個好的 mock server 可以用數據模板來模擬大量數據）；
（2）通過 devServer 的 bypass 映射到本地 mock 目錄（json文件，有一定限制性）。
devServer: { // 配置此靜態文件服務器，可以用來預覽打包后項目
contentBase: path.resolve(__dirname, 'dist'), // 開發服務運行時的文件根目錄
host: 'localhost', // 如果想要映射到本機IP，這里改成 '0.0.0.0'
port: 3000,
compress: true, // 開發服務器是否啟動gzip等壓縮
proxy: {
'**/*.action': {
// target: 'http://127.0.0.1:' + mockport, // 如果起一個本地 mock 服務的話，可以通過 target 進行請求轉發
bypass: function(req, res, proxyOptions) {
if (req.url.indexOf('.action') !== -1) {
req.method = 'GET';
return '/mock/data' + req.url.replace('.action','.json');
}
}
}
}
}
四、區分不同的環境進行構建
一般，我們在構建項目時，會區分開發環境和線上環境：
- 開發環境是需要方便代碼調試的，比如利用 Source Map 映射代碼方便調試，或者輸出一些提示日志。
- 線上環境是真正運行項目代碼的，需要對代碼進行壓縮，利用瀏覽器緩存優化請求等。
有些項目還會區分聯調環境和測試環境，比如各個環境的請求地址可能不同，可以根據實際項目進行配置。
let publicPath = '';
if (process.env.NODE_ENV === 'production') { // 線上環境
publicPath = 'http://xxx.com';
} else { // 開發環境
publicPath = '/dist';
}
五、利用 webpack 進行優化
1、熱模塊替換（HMR）
什么叫熱模塊替換呢？
它其實是利用了 websocket 的原理，當你對代碼進行修改并保存后，webpack 將對代碼重新打包，并將新的模塊發送到瀏覽器端，瀏覽器通過新的模塊替換老的模塊，這樣在不刷新瀏覽器的前提下就能夠對應用進行更新，從而減少很多時間，能夠幫助我們更加高效的進行開發調試。
要使用它，首先需要開啟 HotModuleReplacementPlugin：
webpack-dev-server --hot
添加 HMR 有兩種方式：
【方案1】：module.hot
if(module.hot) {
module.hot.accept(App);
}
【方案2】：react-hot-loader
// .babelrc
{
"plugins": ["react-hot-loader/babel"]
}
// App.js
import React from 'react'
import { hot } from 'react-hot-loader'
const App = () => <div>Hello World!</div>
export default hot(module)(App)
2、source-map
在開發環境下，開啟 source-map，可以方便調試代碼。
const config = {
//...
devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map';
}
3、代碼提取
提取公共代碼分為兩種：一種是所有頁面都依賴的基礎庫，如 react、react-dom 等；一種是業務代碼中的公共部分，這樣就可以實現瀏覽器緩存。
前者只要不升級基礎庫的版本，Hash 值不會被更新，緩存就不會被更新，后者只要緩存了，就可以實現公共頁面之間的緩存共享。
webpack4 使用內置 API optimization 代替了 CommonsChunkPlugin，默認會為你生成共享的代碼塊。
? Webpack 日常使用與優化
? 沒有了CommonsChunkPlugin，咱拿什么來分包（譯）
4、緩存
一般有兩種緩存方式，chunkhash 和版本號。有時候對外的線上項目會采用版本號來進行緩存，而一些內部項目則使用 chunkhash。
五、項目實戰
?? DEMO
ps：好氣哦，再也不想當webpack配置工程師了￣へ￣
