一、确定项目技术栈
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配置工程师了￣へ￣
