关于webpack配置环境,以及自己搭建react环境
# react
## 1.利用webket构建项目
1.webpack4.x项目创建步骤
(1)运行npm init -y 快速初始化项目 package.json显示
(2)在项目的根目录下创建src源代码目录和dist的目录
(3)在src中建立index.html和main.js文件 main.js是webpack的入口文件
(4)使用cnpm(npm i cnpm -g) 安装webpack 运行cnpm i webpack -D 安装webpack包 安装之前应该保证webpack已经本地安装,否则可能会报错。
(5)cnpm i webpack-cli -D 安装脚手架工具。
(6)此时安装已经完成,在package.json的scripts中输入打包命令 "dev": "webpack",此时打包会提示打包方式
1 // 向外暴露成员webpack.config.js 2 module.exports = { 3 mode: 'development' //development production 4 //webpack4.x中,有一个较大的特性,就是约定大于配置,约定默认的打包入口路径是src -> index.js 5 }
(7)约定大于配置,直接运行会找不到文件,默认是走src下的index.js文件,所以将main.js文件改为index.js. 直接运行。
(8)利用webpack-dev-server 进行实时打包,cnpm i webpack-dev-server -D
(9)在运行中index.html的引入文件 <script src="/main.js"></script> 其中main.js为运行在内存根目录中实时编译的一个文件。不是dist中的,所以引入的文件地址为/main.js而不是../dist/main.js
(10)dev启动配置
"dev": "webpack-dev-server --open(自动打开浏览器) --port 3000(改变端口号为3000) --hot(热更新) --host 127.0.0.1(配置地址)"
(11) 将index.html 托管到内存中去
cnpm i html-webpack-plugin -D
之后在webpack.config.js中导入并配置
1 // 向外暴露成员 2 const path=require('path') 3 const HtmlWebpackPlugin=require('html-webpack-plugin') 4 6 const htmlplugin=new HtmlWebpackPlugin({ 7 template: path.join(__dirname,'./src/index.html') , //源文件 8 filename:'index.html' //内存中生成的文件名称 9 }) 10 module.exports = { 11 mode: 'development', //development production 12 //webpack4.x中,有一个较大的特性,就是约定大于配置,约定默认的打包入口路径是src -> index.js 13 plugins:[ 14 htmlplugin 15 ] 16 }
(12)此时运行npm run dev 会直接打开页面,同时在内存中能够自动引入main.js 不用在index.html中引入。
## 2.构建react项目
(1)运行cnpm i react react-dom -s 安装包
引入 :
import React from 'react'
import ReactDOM from 'react-dom'
(2)创建虚拟dom元素
参数1:创建的元素的类型,字符串,表示元素的名称
参数2:是一个对象或null,表示当前这个DOM元素的属性
参数3:子节点(包括 其它 虚拟dom获取文本子节点)
参数n:其他子节点
创建h1 <h1 id='myh1' title="this is h1">这是一个大大的h1</h1>
const myh1=React.createElement('h1,{id:'myh1',title:"this is h1"},'这是一个大大的h1')
(3)使用ReactDOM把虚拟DOM渲染到页面上
参数1:要渲染的那个虚拟DOM元素
参数2:指定页面上的DOM元素,当作容器
第二个参数是dom元素
ReactDOM.render(myh1,document.getElementById('app))
(4)为了写html标签 可以用babel来转换
注意:这些在js中,混合写入类似于html的语法,叫做jsx,符合xml规范的js
## 3.jsx语法
### 1.启用jsx语法
版本一 (babel8.X版本以下)
(1)安装babel插件
cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D 语法
(2)安装能够识别转换jsx语法的包babel-preset-react
cnpm i babel-preset-react -D
(3)添加.babelrc配置文件
{
"presets":["env","stage-0","react"],
"plugins":["transform-runtime"]
}
注意:npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D
bable-loader,babel-core 会出版本问题,请见babel版本问题 babel-loader7.x 配 babel-core 6.x
使用 `npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
版本二 (babel8.X版本)
(1)必须安装的包
"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/runtime": "^7.4.5",
"babel-loader": "^8.0.6",
安装命令:
cnpm i babel-loader @babel/core @babel/plugin-transform-runtime -D
cnpm i @babel/preset-env @babel/runtime @babel/plugin-proposal-class-properties -D
安装能够识别转换jsx语法的包babel-preset-react
npm install --save-dev @babel/preset-react
(2).babelrc文件
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}
webpack.config.js配置项
1 // 向外暴露成员 2 const path=require('path') 3 const HtmlWebpackPlugin=require('html-webpack-plugin') 4 5 const htmlplugin=new HtmlWebpackPlugin({ 6 template: path.join(__dirname,'./src/index.html') , //源文件 7 filename:'index.html' //内存中生成的文件名称 8 }) 9 module.exports = { 10 mode: 'development', //development production 11 //webpack4.x中,有一个较大的特性,就是约定大于配置,约定默认的打包入口路径是src -> index.js 12 plugins:[ 13 htmlplugin 14 ], 15 module:{ 16 rules:[ 17 {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/} 18 ] 19 } 20 }
.babelrc配置项
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}