React 安装与环境搭建——web应用端

一、下载 React 资源：

1. React 开源网址 https://github.com/facebook/react
2. React 官网 https://facebook.github.io/react

二、React 环境搭建

1. 方式一： 直接将 React 资源文件引入项目；
   引入方式：

   <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

   注意：引入资源方式不推荐使用

2. 方式二 ： 使用 npm 管理 React 安装（官方推荐）
   2.1. 安装 nodejs 环境
   2.1.1. 下载 nodejs 资源 ：
   下载地址 http://nodejs.cn/ 中文网
   https://nodejs.org/en/ 官网
   2.1.2 安装 nodejs
   直接点击下一步，直到安装完成 （此处不做叙述）
   2.1.3 验证是否安装成功
   打开终端 按 win + R , 输入 node -v 即显示版本号
   输入 npm -v 即显示版本号
   表示安装成功

   2.2. 安装完成后，配置 npm
   安装淘宝的镜像文件： 安装意图——避免在使用安装模块访问网速过慢，通过安装淘宝镜像文件可提升访问速度

   npm install -g cnpm --registry=https://registry.npm.taobao.org

三、React 初始化 ---- 搭建web应用

1. 在指定目录下打开终端 win + R ； 初始化项目

   npm init

   

2. 安装依赖包
   a. 安装css文件包

   npm install css-loader style-loader --save

   
   b.安装 babel-core babel-loader babel-preset-es2015 babel-preset-react babelify 为 js 语法包，为了适应js的一些语法，比如 ： es5 语法

   npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babelify --save

   
   c.安装 react react-dom 依赖包

   npm install react react-dom --save

   
   以上为项目所需要的依赖安装包安装完毕，验证是否安装OK，可以去项目文件夹中找到package.json 查看刚才所安装的包是否都在。若都在，说明安装成功。
   
   请注意安装包的版本，否则会在后续打包时出错误。

3. 在初始化文件夹中创建项目路径
   

四、项目打包 —— 解决不识别语法错误

1. 项目创建好后，没有经过打包，会不识别 js 语法，即会报错 ：
   

2. 安装使用 webpack 打包项目

   2.1. 创建 webpack.config.js 文件，并将下面代码复制在文件中

   var webpack = require('webpack');
   var path = require('path');
   
   module.exports = {
   mode: 'development',
   context: path.join(__dirname) + '/src',
   entry: "./js/index.js",
   module: {
   rules: [
   {
   test: /\.js?$/,
   exclude: /(node_modules)/,
   loader: 'babel-loader',
   query: {
   presets: ['react', 'es2015']
   }
   },
   {
   test:/\.css$/,
   loader:'style-loader!css-loader'
   }
   ]
   },
   output: {
   path: __dirname + '/build',
   filename: "bundle.js"
   }
   };

   上面代码为打包项目时，入口文件，出口文件和打包规则的设置。

   注意：module 键为：rules，以前的旧版本用的是：loaders

   2.2. 安装 webpack

   a. 全局安装 webpack-cli webpack webpack-dev-server

   npm install webpack-cli webpack -g

   npm install webpack-dev-server -g

   注意 ： 安装 webpack-cli 和 webpack 需要同时安装，以前 webpack 与 cli 是一个整体，目前新版本 webpack4+ ，将 cli 分离出来了。

   b. 项目中安装 webpack-cli webpack webpack-dev-server

   npm install webpack-cli webpack --save-dev

   npm install webpack-dev-server --save-dev

   注意 ： 安装 webpack-cli 和 webpack 需要同时安装。

   c. 安装完成后，验证 查看版本号 , 显示版本号表示安装成功

   webpack -v

   黄色框中所显示的内容 即为安装成功；
   

   2.3 webpack 打包项目

   直接输入 webpack 即可

   webpack

   2.4 查看打包后的文件 bundle.js ——》将项目中 index.html 文件里，引入的入口 js 文件改为打包后的出口 js 文件，即 如下图

   
   以上操作即可解决项目不识别 reactjs 语法错误；

五、webpack-dev-server 项目热重载

1. 安装 webpack-dev-server ，在安装webpack时已安装，此处不再叙述；
2. 在项 4000 目文件夹目录下，输入 webpack-dev-server
   
3. 将生成的链接 http://localhost:8080/ （蓝色字体）复制到浏览器中打开，原本以为在编辑代码后可以正常加载页面，显示最新编辑好的内容，然而 webpack-dev-server 给我们开了一个玩笑，总会有那么点儿小插曲让我们 “拭目以待” ！ 不用担心，问题总会得到解决的，看下一步;
4. webpack-dev-server 指令生成动态 bundle.js 文件，每次的编辑都将重新更新 bundle.js ；该文件目录在 根目录 下生成；为了能在浏览器中显示刚编辑好的代码，此时需要将 index.html 文件中的 script 引入路径更改为 ./bundle.js ；
5. 重新输入 webpack-dev-server 即可在浏览器中显示；后续所有操作会实时进行刷新！

webpack 有很多参数可以供我们使用。相关的一些参数可点击下面网址进行了解
webpack 官方文档：https://webpack.js.org/guides/development
webpack-dev-server 官方文档：https://webpack.js.org/configuration/dev-server

webpack 中文文档：https://webpack.docschina.org/concepts/
webpack-dev-server 中文文档：https://webpack.docschina.org/configuration/dev-server/

六、总结

开始搭建项目，只想着能够尽快实现项目的运行，没有认真查看文档；在webpack配置环境中卡住了，出现问题后未能搜到类似问题解决方法。看了很多文档，几乎都是讲述以前的版本，没有能解决自己所遇到的问题。在此将 React 安装与环境搭建 ， webpack新版本 项目打包配置 的操作流程做个总结，供大家参考，节约开发时间。如有疑问，欢迎留言，共同探讨！ 抱拳！！！