用webpack4搭建react环境

创建基本的webpack4.x

1. 项目运行npm init -y快速初始化项目
2. 在项目根目录创建src和dist目录在src下创建index.html、index.js入口文件
3. 安装webpack npm install webpack webpack-cli -D webpack-cli是命令行工具（4.x之后webpack命令由webpack-cli进行提供）创建webpack.config.js配置文件（向外暴露一个打包的配置对象)

/**
   * 在webpack4.x中有一个很大的特性，就是约定大于配置  故创建约定打包入口文件夹则不用配置入口文件选项
   *   约定默认打包入口路径是src->index.js   
   *   约定打包输出文件为dist->main.js
   */
module.exports = {
   mode: 'development' //development:开发模式下，打包后的文件不被压缩/production：生产环境下，打包后的文件被压缩
  }

4. 执行webpack命令，可见打包成功将打包后的路径引入到index.html文件中<script src="../dist/main.js"></script>，此时输入wabpack命令，可打包成功，在浏览器中可看到index.html中内容
5. 配置实时打包编译npm install webpack-dev-server，这样就不用每次修改代码之后，重新执行打包命令代码才能生效
   • 在package.json文件的scripts属性下添加脚本命令，以便于简化的运行打包命令

"script":{
 	 "dev":"webpack-dev-server --open  --port 3000 --hot --host 127.0.0.1"
  	 }
/**
* --open：自动打开浏览器（也可指定浏览器 --open chrome）
* --port: 指定端口号
* --host: 指定域名
*/

• 此时webpack-dev-server打包的文件在内存中（目的是为了读取速度快），并没有落盘，所以在项目根目录中看不到，此时我们可认为在项目根目录中有一个看不见的main.js
• 下一步要修改index.html文件中引入打包好js的路径，因为之前引用的还是webpack打包好的文件路径，而使用webpack-dev-server之后，打包好的main.js文件路径在根目录下（虽然还未写入物理磁盘）<script src="/main.js"></script>
• 运行npm run dev开始打包此时已完成打包，且打包好的main.j保存在内存中，但有没有办法让index.html文件也放在内存中呢？答案当然是有，我们可以借助html-webpack-plugin插件

6. 安装npm install html-webpack-plugin -D
   • 在webpack.config.js中配置（如下）
   • 该插件可以自动插入打包好的main.js文件，所以可删除之前在index.html中引入的script包
   • 运行命令npm run dev，即可直接进入index.html文件下

const path = require('path')
const HtmlWebPackPlugin = require('html-wepack-plugin') //导入在内存中自动生成index页面的插件
​
//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'),//源文件
    filename: 'index.html' //生成的内存中首页的名称
})
​
modulu.exports = {
    mode: 'development',
    plugins: [
        htmlPlugin
    ]
}

至此，webpack的基本配置已经完成

在项目中使用react

1. 运行npm install react react-dom -S
   • 安装包react：专门用于创建组件和虚拟DOM，同时组件的生命周期都在这个包中
   • react-dom：专门进行DOM操作，最主要应用场景就是ReactDOM.render()
   • 导入包

//1.导包，接收成员必须这么写
import React from 'react' //创建组件、虚拟DOM元素，生命周期
import ReactDOM from 'react-dom'//把创建好的组件和虚拟DOM放在页面上展示创建虚拟DOM对象

//2.创建虚拟DOM元素(js对象)
//参数1：创建元素的类型，字符串，表示元素名称
//参数2：创建当前DOM元素的属性，是一个对象或null
//参数3：子节点（包括 其他 虚拟DOM 文本子节点）
//参数n：其他子节点
const myh1 = React.createElment('h1',{id: 'myh1', title: 'this is a h1'}, '这是一个H1')
​
const mydiv = React.createElment('div', null, '这是一个div元素', myh1)//嵌套将虚拟DOM渲染到页面//3.使用ReactDOM把虚拟DOM渲染到页面上
//参数1：要渲染的那个虚拟DOM
//参数2：指定页面上的一个容器，是一个DOM元素 而不是选择器（已在index.html文件中创建id为app的容器）
ReactDOM.render(mydiv, document.getElementById('app'))

但开发中真要使用如上API编写虚拟DOM，太过繁琐，但在js文件中不能写HTML标记，故解决方法：使用babel来转换js中的标签

• 在js中混合写入类似HTML的语法，叫做JSX语法，符合XML规范的jsconst mydiv =
  这是div
  JSX语法的本质，
• 在运行时，先要被babel转换为以上第2步的语法，再由react处理

JSX语法

如何启用jsx语法

1. 安装babel插件(注意版本babel-loader需要7.x)
   • 运行npm insatll babel-core babel-loader babel-plugin-transform-runtime -D
   • 运行npm install babel-preset-env babel-preset-stage-0 babel-preset-react -D
   • 在webpack.config.js中配置第三方规则

//webpack默认只能打包处理.js后缀名类型的文件；像.png .vue无法主动处理，所有要配置第三方loader
module.exports = {
    module: {  //所有第三方模块配置规则,当webpack遇到处理不了的文件，会在该属性下寻找匹配规则
        rules: [
            { test: /\.js|jsx$/, use:'babel-loader', exclude: /node_modules/}
        ]
    }
}

2. 在根目录下创建.babelrc文件，是一个json文件

{
    "presets ": ["env", "stage-0", "react"],
    "plugins": ["transform-runtime"]
}

jsx语法本质：并不是直接把jsx渲染到页面上，而是内部先转换为createElement形式，再渲染的；

至此，基于webpack4的最基本的React环境已经搭建好