React基础篇(三)之 webpack打包项目配制

1、本篇章配置一个 webpack 打包项目
2、简述 jsx 语法配置支持

1 初始化项目

使用 IDE 打开目录
在命令行中初化化项目

 npm init -y

然后安装 webpack

 cnpm i webpack -D

然后安装 webpack-cli

webpack-cli 用来执行webpack相关命令

 cnpm i webpack-cli -D

创建 源代码src目录、打包输出目录 dist目录
然后在 src 目录中

创建 index.js 文件 目前是一个空的 js 文件

创建 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页面</title>
</head>
<body>

</body>
</html>

创建 webpack的配制文件webpack.config.js

module.exports = {
  mode: 'development',// production development
};

目前项目目录如下:

然后在命令行中执行 webpack 打包项目
在这里插入图片描述
打包完成后,在dist 目录下就生成了打包后的 main.js 文件

然后配制 webpack-dev-server

cnpm i webpack-dev-server -D

在这里插入图片描述
然后配制 package.json

{
  "name": "demo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // --open 打包完成后 在浏览器中打开
    "dev": "webpack-dev-server --open --port 8080 --hot --progress --compress"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.4.1",
    "webpack-cli": "^3.3.10"
  }
}

然后命令行执行

npm run dev 

在这里插入图片描述

然后配制

npm i html-webpack-plugin -D

在 webpack.config.js 中



const path = require('path');
//导入插件
const  HtmlWebPackPlugin = require('html-webpack-plugin');
//创建插件
const  htmlPlugin = new HtmlWebPackPlugin({
  template:path.join(__dirname,'./src/index.html'),//源文件
  filename: 'index.html' //生成内存中首页面的名称
});


//Node.js 两种导出模块的方式:module.exports和exports
//module和exports是Node.js给每个js文件内置的两个对象
module.exports = {
  mode: 'development',// production development
  //引用插件
  plugins: [
      htmlPlugin
  ]
};

然后再次运行

npm run dev 

在浏览器中
在这里插入图片描述

2 在项目中使用 React

2.1 安装 react

 cnpm i react react-dom -s
  • react 专门用于创建组件和虚拟DOM,同时组件的生命周期都在这个包中
  • react-dom 专门进行DOM操作的,最主要的应用场景就是 ReactDom.render()

2.2 在 index.html 中创建容器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页面</title>
</head>
<body>
<!--容器, 使用React 创建的虚拟DOM元素,都会被渲染到这个指定的容器中-->
<div id="app"></div>
</body>
</html>

2.3 在 index.js 中使用 react

//第一步 导入依赖
//这两个导入进,接收的成员变量名称必须这样写

//用来创建组件、虚拟DOM元素 生命周期
import React from 'react';
//所创建好的组件和虚拟DOM放到页面上展示
import ReactDOM from 'react-dom';


//第二步 创建 虚拟DOM 元素
//参数一 创建元素的类型,字符串,表示元素的名称
//参数二 是一个对象或null 表示当前这个 DOM元素的属性
//参数三 子节点

// 这里创建的DOM元素等效于 <h1 id="hx1" title="这是title">
const elementH1 = React.createElement('h1', {id: 'hx1', title: '这是title'}, '这是一个H1标签');


//第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
// 参数一 要渲染的虚拟DOM元素
// 参数二 指定页面上的容器
ReactDOM.render(elementH1, document.getElementById('app'));

然后 运行项目

npm run dev 

在这里插入图片描述

在上述代码中我们使用的是 React.createElement 来创建的DOM元素,这种在实际开发中不太适用

在 js 文件中默认不可以书写 类似于 HTML 这样的标记语言,否则会打包失败,如果需要这样写,可以使用 babel 来转换

在 JS 中混合写入类似于 HTML 的语法,叫做 JSX 语法,符合 XML 的 JS

启用 JSX 语法,运行安装 babel 插件

 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
 cnpm i babel-preset-env babel-preset-stage-0 -D

安装能够识别转换 jsx 语法的包

cnpm i babel-preset-react -D

添加 .babelrc 配置文件,在项目跟目录下创建 .babelrc 文件


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

在 webpack.config.js 中配置 匹配规则


const path = require('path');
//导入插件
const  HtmlWebPackPlugin = require('html-webpack-plugin');
//创建插件
const  htmlPlugin = new HtmlWebPackPlugin({
  template:path.join(__dirname,'./src/index.html'),//源文件
  filename: 'index.html' //生成内存中首页面的名称
});


//Node.js 两种导出模块的方式:module.exports和exports
//module和exports是Node.js给每个js文件内置的两个对象
//webpack 默认只能打包处理 .js 后缀名类型的文件
module.exports = {
  mode: 'development',// production development
  //引用插件
  plugins: [
      htmlPlugin
  ],
  //所有的第三方模块的配置规则
  module: {
    //匹配规则
    rules: [
      {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
    ]

  }
};

然后在 index.js 文件中我们使用 jsx语法

//第一步 导入依赖
//这两个导入进,接收的成员变量名称必须这样写

//用来创建组件、虚拟DOM元素 生命周期
import React from 'react';
//所创建好的组件和虚拟DOM放到页面上展示
import ReactDOM from 'react-dom';


//第二步 创建 虚拟DOM 元素
//参数一 创建元素的类型,字符串,表示元素的名称
//参数二 是一个对象或null 表示当前这个 DOM元素的属性
//参数三 子节点


//在JS 文件中 HTML 这样的标记语法 为 jsx 语法
const elementDiv = <div id="mydiv" title="div"> 这是一个 DIV </div>

// 这里创建的DOM元素等效于 <h1 id="hx1" title="这是title">
const elementH1 = React.createElement('div', {id: 'hx1', title: '这是title'}, '这是一个父div标签',elementDiv);





//第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
// 参数一 要渲染的虚拟DOM元素
// 参数二 指定页面上的容器
ReactDOM.render(elementH1, document.getElementById('app'));

然后运行

npm run dev 

浏览器中
在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页