手动创建简单webpack项目及React使用

一、创建基本的webpack4.x项目

1、运行 npm init -y 快速初始化项目

2、在项目根目录创建src的源代码目录和dist产品目录

3、在src目录下创建 index.html

4、使用cnpm 下安装 webpack, 运行cnpm i webpack webpack-cli -D

• 如何安装 cnpm 全局运行npm i cnpm -g

5、注意webpack 4.x 提供了 约定大于配置的概念；目的是为了尽量减少配置文件的体积；

• 默认约定了;
• 打包的入口是src -> index.js
• 打包的输出文件是dist ->main.js
• 4.x中新增了mode 选项（为必选项），可选的值为：development 和 production；

二、在项目中使用react

1、运行 npm i react react-dom -S 安装包

• react 专门用于创建组件，同时组件的生命周期都在这个包中
• react-dom ：专门进行DOM操作你的，最主要的应用场景，就是ReactDOM.render()

2、在index.html 页面中，创建容器

<!-- 容器，将来，使用 React 创建虚拟DOM元素，都会被渲染到这个指定的容器中 -->
<div id='app'></div>

3、导入包

import React from 'react'
impotr ReactDOM  from 'react-dom'

4、创建虚拟DOM元素：

// 参数1、创建的元素类型，字符串，表示元素的名称
// 参数2：是一个对象或null ，表示当前这个DOM元素的属性
// 参数3：子节点（包括其他 虚拟DOM 获取文本节点）
// 参数n：其他子节点

// const myh1 = React.createElement('h1', null, '这是一个大H1')
const myh1 = React.createElement('h1', {id: 'myh1', title: 'this is h1'}, '这是一个大H1')

5、渲染

// 参数1:要渲染的那个虚拟的DOM元素
// 参数2:指定页面上DOM元素，当做的容器
ReactDOM.render(myh1, document.getElementById('app'))
//  Target container is not a DOM element. 经过分析猜测:第二个参数接收的应该是个 DOM元素而不是选择器