手动创建简单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元素而不是选择器

三、JSX语法

什么是JSX语法，就是符合 xml 的js 语法；（语法格式相对来说，要比HTML严谨很多）

如何启动 JSX语法呢安装babel

运行 cnpm i babel-core babel-loader babel-puglin-transform-runtime -D
运行 cnpm i babel-preset-env babel-preset-stage-0 -D
安装能够识别jsx语法的包 cnpm i babel-preset-react -D

添加 .babelrc 配置文件

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

添加 babel-loader 的配置项：

module: { // 所有第三方 模块的配置规则
    rules: [ // 第三方匹配规则
      { test: /.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记加 exclude排除项
    ]
  }

注意：在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误

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