简介

CRA脚手架会创建React应用所需要的基础代码，本文不聊有关React的内容，主要针对脚手架中Webpack配置做一些探讨。 引用官方文档，Create-react-app是一种官方支持的创建React单页面应用的一个脚手架。它可以在不提供任何配置的情况下构建应用。 官网

上手

官方提供了例子，只要先全局安装脚手架之后，直接执行脚手架命令即可构建应用，当然这取决于你的电脑提前安装了node。

安装脚手架

// 全局安装脚手架
npm install -g create-react-app

// 验证是否安装成功
create-react-app --version

本文脚手架版本为5.0.1

创建React应用

在需要创建项目的目录下执行下面的代码，会在该目录下生成项目文件夹

creact-react-app react-demo

如果安装失败尝试换成淘宝镜像试试

npm config set registry http://registry.npm.taobao.org/

Sucess即创建成功

项目解析

基础配置

整体的目录结构很简单，public目录下存放资源文件，src目录下一般用于存放我们写代码的文件，webpack打包入口从这里面的index.js开始，我们重点关注package.json文件。 在文件的scripts配置中可以看到，脚手架默认执行的是react-scripts这个依赖包的程序，这个包在node_modules中可以看到。

package.json react-scripts

重点我们执行yarn eject后将所有webpack配置暴露出来。 这一步不可逆，在项目中谨慎使用！！！

完整配置

执行成功之后项目的目录结构反正改变，重点关注package.json。 文件中的配置主要是：

1. 1.dependencies依赖包
2. 2.scripts变成执行scripts文件夹下的文件
3. 3.eslint的配置
4. 4.浏览器兼容性配置
5. 5.babel预设

重点关注start.js和build.js文件，这倆文件分别用来启动项目和打包项目。 start.js文件和build.js文件整体类似，核心就是调用/config/webpack.config目录下封装好的一个方法，该方法根据传入不同环境参数返回不同的配置，区别在于start启动了devServer，而build利用node的fs模块将打包好的文件输出到磁盘中。 这两个文件的内容主要如下：

1. 给process.env.NODE_ENV定义是开发环境还是生产环境
2. 引入环境变量，主要作用就是将本地.env文件定义的环境变量加到process.env中
3. 检查项目是否有index.html和index.js文件
4. 检查浏览器版本

区别点： start.js 启动项目需要启动本地服务

1. 定义默认端口号
2. 检查端口号，如果默认端口号被占用，则端口号自动加1
3. 调用configFactory传入development参数代表开发环境，返回的config就是开发环境打包需要的配置
4. 将config传入createCompiler方法创建编译器
5. 配置代理配置
6. 将服务器配置和编译器配置传入WebpackDevServer类，生成devserve实例
7. 调用实例上的start方法启动项目

build.js 打包文件需要将打包的资源输出到磁盘中

1. 调用configFactory传入production代表生产环境，返回的config就是生产环境打包需要的配置
2. 清空build下的所有文件
3. 将public文件下的内容copy到build文件中
4. 调用build方法
5. build方法将生成的config传入webpack返回compiler，执行compiler的run方法将最终格式化好的文件输出到磁盘中

核心之configFactory方法

打开webpack.config.js文件，抛开引入的一堆plugin插件和模块，可以将该文件的内容概括为如下：

• 该文件最终是生成开发环境或者生产环境配置的一个函数，接收参数就是用来判断是哪个环境，最终返回一个对象；

1. 判断是否需要开启sourcemap，这个变量贯穿整个配置中需要sourcemap的地方
2. 判断是否需要内联runtime文件

• 判断是否屏蔽eslint校验
• 最大可转化的图片大小

基础配置

• trget: ['browserslist']
• stats: 可以在统计输出里指定你想看到的信息
• mode: 定义构建环境
• bail: 定义遇到错误时该如何运行
• devtool: 此选项控制是否生成，以及如何生成 source map
• entry: 指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始
• output: 指示webpack如何去输出、以及在哪里输出
• cache: 配置缓存
• infrastructureLogging： 配置日志展示方式
• optimization: 配置优化信息
• performance: 配置如何展示性能提示。例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。

mode

mode里的选项决定了如何处理项目中的不同类型的模块，比如js、css、图片、字体等模块，需要用到哪些loader去处理；

• source-map-loader: 当shouldUseSourceMap为true时，使用该loader处理map文件
• babel-loader: 处理js文件
• sass-loader css-loader styles-loader: 处理样式
• file-loader: 处理文件

源码太长就不贴了，有需要的自行在源文件中阅读。

plugins

插件系统

• HtmlWebpackPlugin: 生成html文件，仅在生产环境生效
• InlineChunkHtmlPlugin: 用于内联runtime文件
• InterpolateHtmlPlugin: 解析index.html中%PUBLIC_URL%
• ModuleNotFoundPlugin: 给ModuleNotFound更好的提示
• webpack.DefinePlugin: 定义环境变量
• ReactRefreshWebpackPlugin: 开发环境的快速刷新，也就是类似热更新
• CaseSensitivePathsPlugin: 开发环境检查大小写问题
• MiniCssExtractPlugin: 生产环境将css单独提取成文件
• WebpackManifestPlugin: 通过 WebpackManifestPlugin 插件，可以将 manifest 数据提取为一个 json 文件以供使用
• MiniCssExtractPlugin: 生产环境将css单独提取成文件
• webpack.IgnorePlugin: 打包时忽略第三方包指定目录，例如 moment 的本地语言包
• ForkTsCheckerWebpackPlugin: 使用此插件会将检查过程移至单独的进程，可以加快 TypeScript 的类型检查和 ESLint 插入的速度
• ESLintPlugin: eslint插件

以上就是create-react-app脚手架有关于webpack的配置信息，有写不对的地方欢迎指正。