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
浏览器中
React基础篇(三)之 webpack打包项目配制相关推荐
- WF4.0 基础篇 (三十 完) 对学习WF的一点建议
从09年10月份 NET4.0 Bata 2发布后,我就开始写[WF4.0 基础篇]这个系列,经历了5个多月终于在NET4.0正式发布前将这个系列完成了 这段时间与一些对WF4.0感兴趣的公司与开发人 ...
- 圆形界面 开启相机_「基础篇三」手机摄影拍照界面详解
[基础篇三]手机摄影拍照界面详解 手机拍照对我们来说已习以为常,每天我们都会用手机相机功能或多或少的拍出几张照片.故手机拍照界面对我们来说也不陌生,但手机拍照界面上的那些按钮,那些功能你都用过吗?你 ...
- Pyside2 学习系列三:PyInstaller打包项目瘦身(超详细的Pyside2 攻略)
继上一篇文章打包后,发现包太大了,我们现在开始进行瘦身优化. 本项目的所有演示代码:github可在这里下载. 打包只用的工具为PyInstaller. 不想细看的朋友 可以直接跳到 最后 方法对比 ...
- NodeJs之使用webpack打包项目
首先要明白web开发的困境 文件依赖错综复杂 静态资源请求效率低 模块化支持不友好 浏览器对高级js支持不友好 - 因此我们要使用webpack打包项目 目录 WebPack的使用 WebPack打包 ...
- python 01列表异或_python基础篇三
python基础篇二所介绍的列表是基本的数据类型之一,元组.集合.字典也是基本的数据类型之一.熟练运用这些基本的数据类型很重要,就像是一座高楼大厦,把地基打扎实了,这栋高楼大厦才能在狂风暴雨中岿然不动 ...
- Python机器学习基础篇三《无监督学习与预处理》
前言 前期回顾: Python机器学习基础篇二<为什么用Python进行机器学习> 上面这篇里面写了文本和序列相关. 我们要讨论的第二种机器学习算法是无监督学习算法.无监督学习包括没有已知 ...
- JAVA学习之路--基础篇三
目录 关于Java中从键盘输入的语句 nextxxx().next().nextLine()的区别 语句 if和if else语句 Switch语句 for语句 while和do..while bre ...
- Linux基础知识与实操-篇三: 文件压缩打包与vim基本使用
文章目录 压缩打包与备份 压缩文件命令`gzip bzip2 xz` `gzip` 命令 `bzip2` 命令 `xz`命令 打包指令 XFS文件系统备份与还原 光盘写入工具 其他常见的压缩与备份工具 ...
- React基础篇(五)css样式的使用
本小节主要讲述在 React中使用css scss 以及其他第三方如bootstrap的css样式配置 1 前言 在 JSX 中,如果需要写行内样式,不能为 style 设置字符串的值,而是应该写成 ...
最新文章
- moveit!功能包安装问题
- Windows校验文件哈希hash的两种常用方式
- 逻辑回归的MATLAB实现(二分类问题)
- android 字母排序,android – 按字母顺序排序列表
- Java内存模型深度解析:总结
- python删除excel内容_用python批量删除sheet
- springboot 获取bean_3W 字的 Spring Boot 超详细总结
- 单机dnf正在连接服务器,dnf提示正在连接服务器解决方案
- 从零开始学习Linux笔记
- 用html做krc转换lrc的文件,来,教你怎么把酷狗音乐krc歌词转换成lrc歌词文件?
- 金字塔固定资产管理软件_目前常用固定资产管理软件有哪些?
- 阿里云--短信服务--java实现代码
- HDU - 3966(树链剖分)
- NOD32杀毒软件升级ID
- Win10、11快速切换不同桌面快捷键
- F4—LVDS接口LCD显示彩图测试-2023-02-25
- java经典问题:一球从100米高度自由落下,每次落地后反跳回原高度的一半;再落下,求它在 第10次落地时,共经过多少米?第10次反弹多高?
- php开发discuz插件,discuz x3插件开发傻瓜图文教程,用demo说话
- 闻伟拟将团车网私有化:7个季度亏损接近3亿元,有股东大幅减持
- 路由器攻击java,局域网中ARP攻击和浏览器挟持的解决方法
热门文章
- CV Papers|计算机视觉论文推荐周报20200504期
- Reddit热议:为什么PyTorch比TensorFlow更快?
- 锻炼编程能力的10个游戏:通关既巅峰!
- 墨子科技成果是计算机,祖国强起来!为2017年这些重大科技成果打call
- 车速与档位匹配关系_档位与速度匹配法则 每个档位的速度范围
- CVPR 2021 最佳论文奖项出炉,何恺明等获最佳论文提名 !
- 学术圈「超级内卷」:“青椒”难!
- 收藏 | 各种Optimizer梯度下降优化算法回顾和总结
- 批量读写变换图片(转)
- linux里强制覆盖,Linux cp 强制覆盖(示例代码)