官网地址：nodejs.org/zh-cn/
安装📎手册.docx
node核心模板
常见错误：
1、
常用命令及键盘按键
node 空格 某个js文件 // 调用 node 程序，运行某个js文件
clear 或者 cls // 清空界面
ls/list/dir // 查看列表(list)
cd 目录名 // 进入到目录中去
cd .. // 返回上一级目录
cd \ // 直接回到根目录
Ctrl+C // 停止 Node 程序
输入部分文件名后按下 Tab 键 // 补全文件名 或 目录名， 多次tab会进行切换
↑ ↓ 上下箭头 // 切换历史输入
ctrl + ~ //打开终端 （在vscode）
复制
在小黑窗中复制内容：选中内容，再点鼠标右键
把粘贴板中的内容复制到小黑窗： 点鼠标右键
引入模块 require
语法： const 自定义引入之后的模块名称 =require('模块名称')
// 要使用任何一个模块，得先引入这个模块
// 语法： const 自定义引入之后的模块名称 =require('模块名称')
//如：异步往往伴随着回调函数
同步有返回值
const fs=require('fs') //前面自定义模块名称 建议与模块名称一样
同步和异步的说明
异步非阻塞：因为是异步操作所以不会阻止后面的代码执行 但是会不知道谁先做完
往往 异步伴随着回调函数 同步有返回值
fs读取
总结：
补充说明： node会对自动对Json文件进行转换，可以不用fs模板
前提是 Json文件才可以
如
声明变量接收=require('路径')
const array = require('./db/data.json')
console.log(array);
读取时的编码参数
读取图片不需要编码
可以用base64编码 获取到数据 通过传递src的方式 可以看得到图片
注意：读取图片时编码可以用base64
如：
fs.readFile('./data/images/1.jpg','base64',(err,data)=>{
if(err){
console.log(err);
}else{
console.log(data);
}
})
使用base64数据来在网页显示一张图片
格式：
如
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAY..." alt="">
读取文件与网页utf-8
注意： 1、 读取文本内容文件时，utf8参数要加上，不然打印出来的是一个Buffer二进制内容。
2、 读取网页结构，返回给浏览器做运行时不用加utf-8，它自带有了。（在服务器打印出给自己看时可以加）
补充：后期网页内置的编码，不用加编码格式。
fs异步读取文件 readFile（常用）
语法：fs.readFile('文件路径','选项编码',回调函数)
// 语法：fs.readFile('文件路径','选项编码',回调函数)
// err:如果读取出错了，错误信息
//data：如果没有出错，读取的内容
fs.readFile('./data/1.text','utf-8',(err,data)=>{
if(err){
console.log(err);
}else{
console.log(data);
}
})
不加编码就是一个Buffer二进制内容
fs同步读取 文件readFileSync
语法：let 返回值 = fs.readFileSync(路径，编码)
const fs = require('fs')
// 异步往往伴随着回调函数
// 同步有返回值
// let 返回值 = fs.readFileSync(路径，编码)
let res1 = fs.readFileSync('./data/a.txt', 'utf-8')
let res2 = fs.readFileSync('./data/b.txt', 'utf-8')
let res3 = fs.readFileSync('./data/c.txt', 'utf-8')
console.log(res1, res2, res3)
同步读取文件-错误处理
语法：try{尝试执行的代码块}
catch(err){如果出错，则自动的跳转到catch进行处理}
finally{无论如何都会执行的代码块}
总结： 异步方式读取文件的错误：由回调函数进行处理
同步方式读取文件的的错误由try--catch结构进行处理
try--catch只能处理主线程中的错误，对异步线程的错误无法进行处理
fs写入
总结：
参数3不写 默认是utf-8
参数4回调函数：写入完毕的回调函数（err）=>{} 只需传递一个参数就可以了
补充：/n ( 换行)
特点：1.覆盖式写入，后面写入的内容会将前面的所有内容覆盖
2.如果文件不存在，则先创建再写入
3.如果目录不存在，则报错
注意：不能直接写入对象,或常规数组，需要用JSON.stringify要转成字符串
let obj = { name: 'jack', age: 20 }
let arr = [12, 3, 234, 54]
// 不能直接写入对象,或常规数组
fs.writeFile('./data/a.txt', JSON.stringify(arr), 'utf-8', err => {
if (err) {
console.log(err)
} else {
console.log('ok')
}
})
fs异步写入内容到文件writeFile （常用）
语法：fs.writeFile(文件路径，想写入的内容，编码格式，回调函数)
文件路径：相对路径或绝对路径的
写入的内容：需要是字符串格式
编码格式：参数配置默认是utf-8编码
回调函数：写入完毕的回调函数（err）=>{} 只需传递一个参数就可以了
const fs = require('fs')
// fs.writeFile(文件路径，想写入的内容，编码格式，回调函数)
// 如：
// fs.writeFile('./data/a.txt', '我写内容了', 'utf-8', err => {
// if (err) {
// console.log(err)
// } else {
// console.log('ok')
// }
// })
writeFileSync
同步写入内容到文件writeFileSync
语法：fs.writeFileSync('地址', '想写入的内容')
特点：writeFileSync:没有返回值
const fs = require('fs')
try {
// writeFileSync:没有返回值
fs.writeFileSync('./dataa/a.txt', 'asdfhjkhgfdASDFH')
console.log('ok')
} catch (err) {
console.log(err)
}
创建服务器
方法一
步骤：
1、导入http模板
2、通过http协议创建服务器，回参1负责请求的信息 回参2责响应返回内容
3、给服务器添加监听端口 （端口1000以上随便写）
// 导入http模板
const http=require('http')
// 通过http协议创建服务器
let server= http.createServer((req,res)=>{
// req是负责请求的信息 res负责响应返回内容
// 通过.end()的方法 在响应网页显示文本 （没设置请求头编码只能写英文 不然会乱码）
res.end('hello word')
})
//监听4433端口
server.listen(4433,()=>{
//服务器运行起来了
console.log('127.0.0.1:4433');
})
方法二
//1、 导入http模板
const http=require('http')
// 2、根据协议创建服务器
const server= http.createServer()
// 3、给服务器添加端口的监听
server.listen(3001,()=>{
console.log('服务器运行起来了,http://127.0.0.1:3001');
})
// 4、监听用户请求
// request:当用户发起针对于这个服务器这个端口请求时，就会触发
//则调用回调函数经行处理，并给会掉函数传入两个参数
// req：请求相关信息对象
// res：响应相关信息对象
server.on('request',(req,res)=>{
res.end('okkk') （没设置请求头编码只能写英文 不然会乱码）
})
响应请求头设置 res.setHeader
语法：res.setHeader('Content-Type', '读取类型; charset=utf-8')
如 res.setHeader('Content-Type', 'application/json; charset=utf-8')
// 导入http协议
const http = require('http');
// 导入JSON
const array = require('./db/data.json') //node中 会自动帮jons文件进行转换 所以不需要用fs读写模板
// 创建服务器
const server = http.createServer((req, res) => {
// req是请求信息，res是响应信息
//响应请求头设置
res.setHeader('Content-Type', 'application/json; charset=utf-8')
res.end(JSON.stringify(array));
});
// 绑定端口
server.listen(8002, () => {
console.log("服务器地址: http://localhost:8002");
})
设置内容类型 常用编码 Content-Type
响应请求头设置 语法：res.setHeader('Content-Type', '读取类型; charset=utf-8')
常用内容类型：
1.text/html
文本方式的网页文件。 如 res.setHeader('Content-Type','text/html; charset=utf-8')
2. text/plain
窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。空格转换为 “+” 加号，但不对特殊字符编码。 如 res.setHeader('Content-Type', 'text/plain; charset=utf-8')
3.application/json
数据以json形式进行编码。 如 res.setHeader('Content-Type', 'application/json; charset=utf-8')
GET请求通过res响应信息 判断请求方式和路径
// 导入http模板
const http = require('http');
// 导入JSON
const array = require('./db/data.json') //node中 会自动帮jons文件进行转换 所以不需要用fs读写模板
console.log(array instanceof Array);
// 创建服务器
const server = http.createServer((req, res) => {
// req是请求信息，res是响应信息
// 我怎么知道，你请求的是哪个地址，你的请求方法是get还是post还是其他的
// 请求信息，都在req这里
// console.log('请求方法：', req.method);
// console.log('url：', req.url);
res.setHeader('Content-Type', 'application/json; charset=utf-8')
if (req.method === 'GET' && req.url === '/abc') {
res.end('ABC');
} else if (req.method === 'GET' && req.url === '/def') {
res.end('DEF');
}
});
// 绑定端口
server.listen(8002, () => {
console.log("服务器地址: http://localhost:8002");
})
post请求
// 1 获取http模块
const http = require('http');
// 2 创建服务器
const server = http.createServer((req, res) => {
// 判断post方法
// 判断接口地址是/abc
if (req.method === 'POST' && req.url === '/abc') {
let result = '';
// post的数据，是分块传输的
req.on('data', (data) => {
// 接收一段数据就拼接到result里
result += data;
});
req.on('end', () => {
// 接收完成
console.log('接收完成');
// 打印接收到的数据，在项目中，一般是调用数据库
console.log(result);
// 设置中文编码
res.setHeader('Content-Type', 'text/plain; charset=utf-8')
res.end('保存成功')
})
}
// res.end('ok');
})
// 3 监听端口
server.listen(5050, () => console.log('运行起来了'))
解析传递值的参数URLSearchParams
语法： 声明变量接受返回值=new URLSearchParams(需要结构的变量)
可以用 .get('键名') 拿到值
// URLSearchParams可以解析age=18&gender=1
const d = new URLSearchParams(query); //{age:18,gender:1}
d.get('age')
案例参考：
const http = require('http');
// 创建服务器
const server = http.createServer((req, res) => {
// /abc?age=18
const [url, query] = req.url.split('?');
// URLSearchParams可以解析age=18&gender=1
const d = new URLSearchParams(query);
console.log('参数解析', d.get('gender'));
res.setHeader('Content-Type', 'text/plain; charset=utf-8')
if (url === '/abc' && req.method === 'GET' && d.get('age') === '18') {
res.end('你长大了');
} else {
res.end('你还小')
}
console.log();
});
// 绑定端口
server.listen(8002, () => {
console.log("服务器地址: http://localhost:8002");
})
服务器引入页面和资源
注意：请求页面的时候，页面中的每个资源都是单独的请求，有多少资源就发起多少个请求，如果只发起页面的请求，只能获取到页面静态结构。所以要通过req.url判断去获取每次请求，并拿到文件
const http=require('http')
const fs=require('fs')
const server= http.createServer()
server.listen(5566,()=>{
console.log('服务器已运行,http://127.0.0.1:5566/');
})
server.on('request',(req,res)=>{
// 首页
if(req.url==='/'){
fs.readFile('./data/index.html','utf-8',(err,data)=>{
if(err){
res.end('404')
}else{
res.end(data)
}
}) //css文件
}else if(req.url==='/lib/index.css'){
fs.readFile('./lib/index.css','utf-8',(err,data)=>{
if(err){
res.end('404')
}else{
res.end(data)
}
})
}
})
优化
原因： 一个页面会有多个资源， 一个一个去判断不现实。
优化原理：
1、因为每次server请求的req.url路径包含这某个文件夹名，可以通过indexOf判断是否存在这个文件资源，返回-1是没有，!=-1就是有。
2、因为每次server请求的req.url路径与fs.readFile要放的路径只有一个 . 的区别
注意点：资源不要乱放 什么类型的文件就放什么类型的文件夹
// 1.引入http协议
const http = require('http')
const fs = require('fs')
// 2.根据协议创建服务器
const server = http.createServer()
// 3.添加端口的监听
server.listen(3001, () => {
console.log('http://127.0.0.1:3001')
})
// 4.监听用户请求:每个资源都是单独的请求：只有客户端需要资源 ，就会向服务器发起请求，就会触发request事件
// request：当用户发起针对于这个服务器这个端口的请求时，就会触发
// 则调用回调函数进行处理,并给回调函数传入两个参数
// req:请求相关信息对象
// res:响应相关信息对象
server.on('request', (req, res) => {
console.log('经过了我', req.url)
if (req.url == '/' || req.url == '/index.html') {
req.url = '/views/index.html'
}
// else if (req.url == '/css/index.css' || req.url == '/images/a.png' || req.url == '/js/index.js') {
if (
req.url.indexOf('/css/') != -1 ||
req.url.indexOf('/images/') != -1 ||
req.url.indexOf('/js/') != -1 ||
req.url.indexOf('/views/') != -1
) {
fs.readFile('.' + req.url, (err, data) => {
if (err) {
res.end('404')
} else {
res.end(data)
}
})
} else {
res.end('404')
}
})
npm使用
npm全称：node package management （节点包管理）
介绍：node提供的一个模块管理工具，能帮助我们下载网上别人提供的模块。如（bootstrap、axios、moment、dayjs.....等）
配置npm镜像
配置命令：npm config set registry registry.npmmirror.com/
验证命令：npm config get registry
看到说明安装成功
模块的导入与导出 EX6 (js) 与 commonJS（node）
建议：
1、模块文件命名 不要中文和特殊符号 不要node的模块重名 （如：fs http）
2、模块名最好有业务含义
注意：使用模板要先导出才能导入
基于 EX6 (js)js自己的模块语法 （重点）
使用场景：命名导入/导出（别人使用你的模块，只使用一部分功能）
默认导出（所有功能都要通过一个东西实现，例如axios）
很多第三方的库
特点：默认导出导入与命名导出导入可以一起使用
注意 ： 使用基于 EX6 (js)的导入与导出，要把package.json的type属性的值写成module
如：
命名导出（一个一个导出）
// 命名导出
// 语法：导出谁就在谁前面加export
export function sum(a,b){
return a+b
}
export function subtract(a,b){
return a-b
}
默认导出（一次性导出）
注意：1、默认导出 通常是导出一个对象 （ 也可以单个方法导出）
2、js规定：一个文件，只能有一个默认导出
语法：
export default {
变量名，
变量名，
}
或者 export default 变量名 // 不建议这样
如
function sum(a,b){
return a+b
}
function subtract(a,b){
return a-b
}
export default {
sum,
subtract,
}
命名导入（一个一个导入）
注意： 直接调用{}内的方法就好了
// 命名导入
// 语法 import { 需要用到的变量名或函数名 } from "路径";
如
import { sum,subtract } from "./06ex math.js";
console.log(sum(10,20));
console.log(subtract(60,50));
默认导入（一次性导入）
注意： 通常导入的是个对象 用的时候 用对象.属性的方法调用
// 默认导入
语法：
import 随便起个名字 from '路径'
如：
import math from './06ex math.js'
console.log(math.sum(50,50));
console.log(math.sum(100,50));
基于commonJS（node）
注意： 使用commonJS（node）导入与导出，要把package.json的type属性的值写成commonjs
如 ：
命名导出（一个一个导出）
// commonJS（node） 一个一个导出模块
//语法：
exports.导出模板名=函数名
如：
function sum(a,b){
return a+b
}
exports.sum=sum
function subtract(a,b){
return a-b
}
exports.subtract=subtract
默认导出（一次性导出）
语法：
module.exports={
导出的命名：函数名,
导出的命名：函数名,
}
ES6提供简写
如果两个名字一致可简写：
module.exports={
函数名,
函数名,
}
----------------------------------------------------------------------------------------
//自己写的满版
function sum(a,b){
return a+b
}
function subtract(a,b){
return a-b
}
//ES6提供简写
module.exports={
sum, // sum:sum,
subtract, // subtract:subtract,
}
导入
注意点： 不管是命名导出 还是一次性导出，导入的方法都一样
拿到的是一个对象 ，用 对象.属性 调用模板方法
语法：
const 导入模板命名 = require('模板路径');
如：
// 导入模块
const math = require('./02math');
console.log(math.sum(1, 2)); //3
console.log(math.subtract(10, 5)); //5
npm使用
npm初始化（首先）
1、初始化 命令：npm init -y
2、出现package.json文件 说明成功了
配置npm仓库为国内的
命令：npm config set registry registry.npmmirror.com/
检测命令：npm config get registry
验证配置成功，如果输出下面这行就是成功的
补充说明：配置成功后，镜像源为taobao
安装模块包
1、安装模块包 命令：npm install 模块名/简写：npm i 模块名 如：
2、会在package.json同级目录下自动创建node_modules文件夹。如：
3、package.json文件会更新
注意：检查步骤2和3 是否有对应的东西
补充说明：npm i 模块名@版本号 （可以指定版本号） 如：
删除模块包（需要删除时）
删除模块包（需要删除时）
方法1、npm uninstall 包名
方法2、npm un 包名
方法3、npm r 包名
如：
安装nodemon与使用
作用：只要文件修改代码 都会重新运行指定的文件（自动运行） 并返回运行结果
安装nodemon 当前文件夹安装 全局安装
1、npm i nodemon -g （-g 全局安装）
全局意味着任何地方都能直接使用
验证命令：nodemon -v
看到版本号 安装成功
2、nodemon 文件名 如：
作用：只要文件修改代码 都会重新运行指定的文件（自动运行） 并返回运行结果
补充：遇到脚本禁止运行，在powershell运行：Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
nrm的安装与使用
说明 ： nrm提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址
全局安装nrm
命令:npm i nrm -g （g代表全局安装）
验证命令：nrm use taobao
看到说明成功了
查看有哪些可用镜像
命令：nrm ls
如：
测试仓库速度
命令：nrm test （带*的代表你处于那个镜像）
如：
切换镜像
命令：nrm use 名字
如：
切换后
webpack
webpack.docschina.org/guides/asse…
查找webpack文档，搜索关键字 需要说明搜什么
webpack指南，一篇完整的webpack使用说明****
webpack的基本使用
首先先安装npm
1、安装webpack
命令：npm install webpack webpack-cli --save-dev
2、提供要打包
提供要打包的代码放到src文件下
如：
3、配置运行webpack的命令
在package.json文件下配置
如：
补充说明：一般名为 dev或serve或start
4、运行webpack，完成打包
命令：npm run 配置webpack的名字（dev/server/start） 配置取啥名就用啥名
如：
5、得到打包文件
会自动创建dist文件夹，dist文件夹下拿到的就是src放的文件打包后的文件
如：
6、导入打包后的文件
新建html引入运行代码
如：
webpack配置文件
创建配置文件
创建文件夹，命名为webpack.config.js（名字是固定的）
如：
webpack-dev-server本地开发服务器的端口配置
改完重启webapck 端口号就改成设置的端口号了
补充：
配置打包模式（mode）和入口（entry）
报错：
上面的报错，是指你没有指定打包模式（可以忽略）
注意 ： 后面不需要我们自己配置（用工具一键生成）
说明 ****：1、 默认打包转换后的代码时经过压缩的代码
如果不想要压缩过后的代码，设置 mode:'development'
2、入口地址默认是 Src/index.js
语法：
module.exports{
entry:'入口路径',
mode:'development'
}
用js语法记得设置type属性
export default{
entry:'入口路径',
mode:'development'
}
如：
方法二
如果不想要压缩过后的代码，可以在package.json文件中配置script脚本命令中加
语法：地址 --config webpack.config.js
配置输出（output）和入口（entrt）
说明：1、入口（entrt）：你想打包的文件路径
2、输出（output）：打包之后的文件存放的目录及文件名称——output是一个对象，
2.1、output里面的path是指存放的目录（从版本3开始，要求是一个绝对路径）
2.2、output里面的filename是指生成的文件名称（常用名字：app main handler）
****默认入口: ./src/index.js默认出口: ./dist/main.js
配置输出（output）和入口（entrt）语法：
const path = require("path") //node导入核心模块（可以规范化生成）
//path.join（）可以规范化生成的路径
//__dirname可以生成当前文件下的绝对路径
module.exports = {
entry: "./src/main.js", // 入口
output: {
path: path.join(__dirname, "dist"), // 出口路径（绝对路径）（一般都是放在dist文件夹下）
filename: "main.js" // 出口文件名 常用名字：app main handler）
}
}
补充说明__dirname与path.join
__dirname可以生成当前文件下的绝对路径
path.join（）可以规范化生成的路径（path是node核心模块所以要先导入）
说明：因为不同用户电脑系统，路径的反现杠写法不同，所以使用path.join
如：
webpack-dev-server插件安装与使用
前提：安装webpack
1、下载webpack-dev-serve
命令：npm install webpack-dev-server --save-dev
查看是否安装成功：
补充说明：1、每个webpack版本对应这着每个webpack-dev-serve的版本
2、webpack-dev-server的配置和使用
修改 package.json -> scripts 中的 dev 命令如下（webpack后面加 serve）
3、创建public 提供html（把html放过来）
4、在webpack.config.js配置文件配置打包模式
注意：用js语句记得配置 "type": "module",
module.exports={
mode:'development'
}
js语法 记得设置type
export default{
mode:'development'
}
5、在webpack.config.js中添加配置(不添加也不会影响使用)
忽略这步 不改默认的如下
6重启webpack
7、更改html引入打包文件的路径
报错补充说明
config.js中添加配置中module。expots添加如下代码
devServer:{
static:'.',
}
该代码作用是告诉webpack-dev-server服务器在哪里找项目文件
webpack识别CSS和less
webpack有一个专门处理文件转换的插件——loader
webpack识别CSS
文档说明：webpack.docschina.org/loaders/css…
1、 首先要有在src下创建style文件在style创建CSS文件
2、在入口文件引入css文件
3、安装插件——loader（style与css）
命令：npm i css-loader style-loader -D （这条命令style文件夹和css一起安装了）
4、配置插件
配置代码：
module: {
rules: [
{
test: /.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
5、重启webpack
webpack识别less
文档说明：webpack.docschina.org/loaders/les…
1、 首先要有在src下创建style文件在style创建less文件
2、在入口文件引入less文件
3、安装插件——loader（less）
命令：npm install less less-loader --save-dev
4、配置插件
{
test: /.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
5、重启webpack
webpack识别图片
文档：webpack.docschina.org/guides/asse…
说明： webpack不能直接识别图片，但不用安装插件 webpack 有自己的方法，配置即可
1、提供图片
首先要有在src下创建assets文件，在assets放一张图片
2、在入口文件导入图片
3、配置webpack.config.js文件
注意看图片红色字
{
test: /.png/,
type: 'asset/resource'
}
4、重启webpack
webpack的babel
1、提供js文件
在文件中要先有js文件， 如果有就不添加了
如：
2、安装插件
命令：npm install -D babel-loader @babel/core @babel/preset-env
2.1补充说明（报错）
原因：
报错的话打这个命令：npm install -D babel-loader "@babel/core" "@babel/preset-env"
3、配置插件
{
test: /.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
4、重启webapck
HtmlWebpackPlugin
作用：HtmlWebpackPlugin可以帮助我们生成一个html，并自动引入我们的js
1、安装插件
命令：npm install --save-dev html-webpack-plugin
2、导入插件
注意：配置插件时的 new的插件名与导入插件时的取名要一致
在webpack.config.js文件中
const HtmlWebpackPlugin = require('html-webpack-plugin');
或
import HtmlWebpackPlugin from "html-webpack-plugin"
3、配置插件
注意：配置插件时的 new的插件名与导入插件时的取名要一致
在webpack.config.js文件中
plugins: [new HtmlWebpackPlugin()],
4、可以删除public文件夹也可以不删
删除后用端口访问页面，也是有内容的， HtmlWebpackPlugin插件自动帮我们生成了html页面在RAM内存里面中，并自动引入了我们的js文件。
5、重启webapck
补充说明
用webapck打包可以拿到自己本地内存写的东西（html、js，图片......等）
(自己的做法)webpack-dev-server插件安装与使用
可以看看
1.作用：
在修改源代码的时候页面实现自动刷新(热重载)(webpack打包代码会自动刷星 不用手动发起请求)
通过配置可以自动打开浏览器
2.实现原理
创建一个内存服务器，将打包转换后的资源托管在这个服务器
监听代码的更新，会自动的解析转换并托管，并通知浏览器进行页面的刷新
1、下载webpack-dev-serve
语法： npm i webpack-dev-server@版本号 -D
命令：npm i webpack-dev-server@4.11.1 -D
注意：1、每个webpack版本对应这着每个webpack-dev-serve的版本
2、这里webpack的版本是5.75.0 webpack-dev-serve的版本是4.11.1
3、@加版本号 是安装指定版本 不加则是最新版本 -D是把它跟webpack放在一起
查看是否安装成功：
2、在webpack.config.js中添加配置(不添加也不会影响使用)
忽略这步 不改默认的如下
3、在webpack.config.js中添加配置中module。expots添加如下代码
devServer:{
static:'.',
}
该代码作用是告诉webpack-dev-server服务器在哪里找项目文件
4、webpack-dev-server的配置和使用
1.修改 package.json -> scripts 中的 dev 命令如下（webpack后面加 serve）
5、删除dist文件——把webpack打包输出的文件夹删了
因为这个插件会自动打包，它会按着webpack.config.js配置入口跟出口存放
6、修改html页面引入webpack打包文件的路径
因为这个插件会自动打包，它会按着webpack.config.js配置入口跟出口存放，所以前面的路径可以省略
而且dist文件也已经删了，按之前的路劲会报错
/main.js意思是访问项目的跟路径
7.运行 npm run dev 命令，重新进行项目的打包（webpack前面是啥名就run啥名）
如：
注意：每次修改webpack.config.js文件和package.json都经行重新带包
8、修改入口文件代码实现自动更行
入口文件就是被打包的文件。每次修改该文件输出文件都会跟着修改，并且页面会跟着渲染
原理解释与补充说明
webpack-dev-server做了那些事？
通过服务器给的地址和端口号进行验证
服务器给的地址 ：
拿到在服务器存放的输出文件
也可以这样访问网页（不加也可以）
