Webpack4+React 项目框架从0到1

一、确定项目技术栈

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

三、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');
                    }
                }
            }
     }
}

四、区分不同的环境进行构建

一般，我们在构建项目时，会区分开发环境和线上环境：

开发环境是需要方便代码调试的，比如利用映射代码方便调试，或者输出一些提示日志。
线上环境是真正运行项目代码的，需要对代码进行压缩，利用浏览器缓存优化请求等。

有些项目还会区分联调环境和测试环境，比如各个环境的请求地址可能不同，可以根据实际项目进行配置。

let publicPath = '';
if (process.env.NODE_ENV === 'production') {  // 线上环境
  publicPath = 
} 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，默认会为你生成共享的代码块。

4、缓存

一般有两种缓存方式，chunkhash 和版本号。有时候对外的线上项目会采用版本号来进行缓存，而一些内部项目则使用 chunkhash。

五、项目实战

webpack4+router4

ps：好气哦，再也不想当webpack配置工程师了￣へ￣

六、参考

（电子书）