webpack4的基本使用
首先创建项目的基本目录结构
代码都在src文件中，压缩后的代码放在dist中，创建完后执行 npm init -y 生成项目配置文件package.json,然后创建webpack的配置文件webpack.config.js文件，在里面指定打包的相关配置
webpack4有一些默认的设置，比如默认打包入口文件是src下的index.js，默认生成的打包文件叫main.js会放到dist目录下，也可以自己指定，如果采用默认设置，我们只需要指定打包的模式就可以进行打包了
module.exports = {//node语法 webpack基于node
mode:'development'//打包模式 当前为开发环境
// mode:'production' //生产环境 打包压缩 体积小
}然后执行webpack
会显示相关信息，表示打包成功，这时dist文件夹下面会多出一个main.js文件，就是src下的index.js文件打包后的js文件，打包生成的main.js引入index.html文件中，就可以正常使用了。
webpack4.x再往后的版本mode也可以不指定，默认production
webpack热更新:webpack-dev-server
cnpm i webpack-dev-server -D
在项目配置文件中配置webpack-dev-erver的执行命令
"scripts": {
"dev": "webpack-dev-server"
},然后执行npm run dev 就相当于执行了定义的dev右面对应的操作
这时命令行中头两行会有下面两条消息
第一句表示项目现在运行在http://licalhost:8080/
第二局是webpack 输出文件服务于 / 也就是项目根路径
在没用webpack-dev-server时打包好的文件的出口是dist目录下的main.js,当用了webpack-dev-server后，打包好的文件会被托管在根目录下，不过是在内存中（内存可以更快的加载显示，性能更好），所以物理磁盘看不到，也就是说编辑器还是文件夹中看不到打包好后的main.js,不过它确实是存在的，并且这时对index.js中的操做保存后页面是没反应的，因为当前index.js文件打包好的地址不再是dist目录下，而是在项目根路径下，只是我们看不到，现在index.html文件中就要引入根路径下的main.js文件了。
<script src="/main.js"></script>//根目录下的main.js
这样我们对index.js文件中做的操作保存后页面会自动更新，省去了以前要查看一次效果就要webpack一次的步骤
webpack-dev-server还有其他的参数可以配置
比如：
"dev": "webpack-dev-server --open firefox --port 3000 --hot --host 127.0.0.1"
以上表示执行webpack-dev-server操作时–open 自动打开默认浏览器，后面如果加上firefox表示自动打开firefox浏览器，–port表示打开地址端口，默认8080， --hot表示热更新，不写默认就有， --host 表示打开地址，默认localhost
这样我们的js文件就放到了项目根路径的内存中，不过目前来看打开的是整个项目，还需要我们手动点击src文件，才会显示我们的html文件，怎么让我们执行npm run dev就自动打开浏览器并进入index.html页面呢
插件：html-webpack-plugin：在内存中生成index.html文件，并引入内存中的main.js
首先引入
cnpm i html-webpack-plugin -D
然后webpack使用该插件
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'//内存中生成的html页面的文件名
})
module.exports = {
mode:'development',
plugins:[
htmlPlugin
]
}然后执行npm run dev就会自动打开浏览器并显示index.html页面
这样html页面就不需要引js文件了index.html 和 main.js都放在项目根路径的内存中 html-webpack-plugin生成的html文件会自动引入main.js，路径也会自动配置好，不需要我们担心
至此一个基本的webpack配置就搭建好了
npm 后面的 -D -S：
-D 项目开发时期用到的工具 : webpack …
-S 项目开发和上线时都要用到的：vue react react-dom …
react基本使用
首先安装react和react-dom
cnpm i react react-dom -S
然后就简单了，只是使用react的语法创建一个虚拟dom，将其渲染到页面上
//导入 导入名必须是React和ReactDom
import React from 'react'
import ReactDom from 'react-dom'
//创建虚拟DOM元素
const myh1 = React.createElement('h1',{id:"myh1",title:"This is a H1"},"Hello React")
//渲染到界面的DoM元素中
ReactDom.render(myh1,document.getElementById("app"))
index.html
<body>
<div id="app"></div>
</body>
Hello react
一直用React.createElement和ReactDom.render来创建虚拟DOM太过麻烦，所以有了JSX
jsx
在js文件中写html语法
本质还是通过React.createElement和ReactDom.render来创建虚拟DOM，不过我们只需要写html代码，而转换成React.createElement和ReactDom.render的格式则由第三方插件替我们完成
webpack默认只能打包js文件，无法处理.vue .png .less 等格式文件，处理它们由对应的loader，而这些loader的配置规则都写在webpack.config.js文件中的modle中
安装需要的包 babel8较之前版本有所更改。 下载：
cnpm i -D babel-loader
cnpm i -D @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime @babel/preset-react
cnpm i -D @babel/plugin-proposal-class-properties
modle中配置匹配规则
module:{//所有第三方模块的使用
rules:[//规则
{
test:/\js|jsx$/,//匹配js或jsx
use:'babel-loader',//使用babel-loader
exclude:/node_modules/,//排除node_modules中的js或jsx语法
}
]
}rules中规定了当是js或jsx时使用babel-loader，所以要配置下babel-loader
配置babel-loader：根目录下创建 .babelrc 文件
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/transform-runtime", "@babel/plugin-proposal-class-properties"]
}然后就可以使用jsx语法了
const myDiv = <div id="wrap">
<h1>Hello React</h1>
</div>
ReactDom.render(myDiv,document.getElementById("app"))
npm run dev
👌
各个包的作用
