从零开始搭建基于React的SPA应用
前言
最近几年，前端变化非常大，各种新框架应接不暇。从原始的html、css、js基础开发，到现在前端的模块化、工程化，旨在构建出易于维护的前端系统。目前，前端主要有三大框架：React、Vue、Angular。本文将学习如何从零开始搭建一个基于React的前端spa应用。
在开始学习之前，你需要安装node.js，同时对以下知识有所了解：
1.原生js、css、html基础；
2.npm包管理器基础；
3.webpack4打包工具基础；
4.es6标准规范；
5.less预处理器基础；
以上知识点也是目前学习其他前端框架所必须了解的。如果你还未了解，建议你先了解之后再继续下面的文章。
在文章中，会介绍基本的loader，如处理jsx js的babel-loader，处理css less的css-loader和less-loader，处理静态资源文件(png jpg gif等)的url-loader，以及做css兼容处理的postcss-loader，然后会介绍一些插件，比如并行压缩代码插件，css压缩插件。
yarn安装
在本文学习，以及你以后实际开发工作中，可能涉及到很多包的安装，强烈建议使用yarn来安装包(用npm安装包也是一样的)。yarn是Facebook提供的替代npm的工具，可以加速 node模块的下载，跟npm相比，yarn的速度更快。
安装yarn
npm install -g yarn
如果此处使用npm安装太慢，可以切换镜像，比如淘宝镜像。
yarn的使用
初始化项目
yarn init
等价于npm init
添加新的依赖包
yarn add [package] 添加到dependencies，等价于npm install [package] –save
yarn add [package] --dev 添加到devDependencies，等价于npm install [package] --save-dev
升级依赖包
yarn upgrade [package]
移除依赖包
yarn remove [package]
安装项目中全部依赖包
yarn 或 yarn install
webpack介绍
webpack是一个用于现代js 应用程序的静态模块打包工具。通过import 或 require方式可以导入模块，export 或 exports可以导出模块。打包时，webpack会找到项目的入口点，一直找通过import等方式导入的模块，打包到一起，最后输出html+css+js+png等静态文件。
这是webpack官网的描述图。从左上角的入口文件开始，webpack一直寻找项目中所有的依赖，最终打包成右侧的静态资源。
目录结构
项目目录
目录结构
项目搭建
现在，我们可以开始搭建我们的项目了。
先在你电脑的合适位置新建一个文件夹share-demo（文件名可以随便起），作为项目根目录。然后在当前文件夹下打开终端输入命令yarn init初始化项目，一路回车，最后应该会在项目目录下出现package.json文件。package.json文件里，一般记录了项目的配置信息，包括名称、版本、许可证等，也会记录所需的各种模块，包括生产依赖和开发依赖等。
在根目录下新建index.html文件、.babelrc文件、src文件夹、build文件夹。
index.html文件为打包后的html输出模版，如下：
.babelrc文件包含babel的一些基础配置，我们项目最终的文件为：
然后安装webpack、webpacl-cli、webpack-merge。webpack-merge包是合并webpack文件的，后面你会看到它的使用。
yarn add webpack webpack-merge –dev
再在build文件夹下新建webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js，src文件夹下新建index.jsx、index.less。
index.jsx为webpack打包时的入口文件，也即为整个项目的入口文件。
三个webpack文件的基础内容为：
在这里，我把webpack的配置文件进行了拆分，实际项目中可拆可不拆。
webpack.base.conf.js为基础的、项目所必须的一些配置，比如入口、出口的配置，基础loader的配置，html模版输出的配置等，这些配置不论是开发环境还是生产环境，都是必须的。
webpack.dev.conf.js为开发环境的配置，包含mode、devtool，同时还包括针对开发环境不同的loader配置，比如开发环境中的热更新和热替换配置。
webpack.prod.conf.js为测试环境的配置，它和webpack.dev.conf.js的区别就是，前者在实际的生产环境中使用，后者在开发环境中使用。同样包含mode、devtool，同时还包括针对生产环境的loader配置，比如生产环境中对打包后的css文件进行了分离和压缩等。
你肯定在后两个文件里发现了我们前文提到的webpack-merge。对，webpack-merge的使用就是如此的简单。
现在webpack还不能跑，jsx、html文件没有处理，css、less、png、jpg等也未处理。
处理react的jsx文件，我们需要使用到babel-loader，安装babel相关的包：
@babel/core babel核心
@babel/preset-react 转换jsx语法
@babel/preset-env 转换es6语法
@babel/plugin-transform-tuntime 复用插件
@babel/runtime
babel-polyfill 转换es6的新函数或对象，如promise，set，map等
使用yarn安装以上包和babel-loader包。
yarn add @babel/core @babel/preset-react @babel/preset-env @babel/plugin-transform-runtime @babel/runtime babel-polyfill babel-loader --dev
还要处理html模版文件，需要html-loader和html-webpack-plugin插件。
yarn add html-webpack-plugin html-loader –-dev
处理css、less文件需要用到style-loader、css-loader、less-loader。
yarn add style-loader css-loader less-loader –-dev
处理png、jpg、gif等需要用到url-loader。
yarn add url-loader –-dev
之后，再分别修改webpack的三个文件如下：
好了，现在我们的webpack能处理一些基础文件了，接下来终于要安装react,、和react-dom了。
yarn add react react-dom –save--dev
然后修改src/index.jsx如下：
src/index.less如下：
到这里你会发现，所有的工作好像都做完了，但怎么让我们的代码运行起来呢？那就需要使用webpack-dev-server。
安装webpack-dev-server。
yarn add webpack-dev-server --dev
在这里，我也把webpack-dev-server的配置分离了出来。在build目录下新建dev-server.js、ip-config.json、port.json文件。
文件依次如下：
现在，万事俱备，只欠打包。
在package.json里添加脚本，并看下package.json文件：
执行npm start命令，等同于npm run start命令，然后我们看下控制台输出。
当看到Compiled successfully说明我们的服务已经启动成功。
此时浏览器地址栏里键入https:localhost:8080，你应该能看到以下页面：
至此，你已经基本完成了一个基础的基于react的spa应用搭建。
但是，还有一些需要优化的部分。
优化
热更新和热替换
不知你是否注意到，在build/dev-server.js文件里有个参数hot。此参数为true时即可打开热更新功能，但实际上现在当你修改index.jsx时，页面并没有刷新，因为你还需要你在webpack配置文件里做一下修改。
编辑webpack.dev.conf.js文件：
此时再修改src/index.jsx，浏览器页面就会自动刷新了。
使用postcss
简单来说postcss就是做css转换和兼容处理的，比如自动添加css前缀，还能转换最新的css属性。
安装postcss-loader和autoprefixer。
yarn add postcss-loader autoprefixer –dev
继续修改webpack.dev.conf.js和webpack.prod.conf.js文件如下：
这样能保证当我们打包完毕后，html文件中css的插入位置会自动添加适配浏览器的前缀，而无需我们手动操作。
分离和压缩css
在实际的生产环境中，需要尽可能的压缩css，同时需要把css内容从js文件里分离出来，以加快系统的启动速度，提高性能。这里需要用到mini-css-extract-plugin和optimize-css-assets-webpack-plugin，先安装这两个包。
yarn add mini-css-extract-plugin –dev
yarn add optimize-css-assets-webpack-plugin –dev
然后修改webpack.prod.conf.js文件如下：
注意，style-loader要删除，替换成MiniCssExtractPlugin方法。
还有很多其他的优化方式，后期可根据实际项目去配置和修改。
至此，项目的搭建工作已经基本完成，剩下的还需你继续学习。
