Node.js与Webpack
目录
一、Node.js入门
什么是Node.js?
什么是前端工程化?
Node.js为何能执行JS?
Node.js安装
使用Node.js
fs模块-读写文件
path模块-路径处理
URL中的端口号
常见的服务程序
http模块-创建Web服务
二、Node.is模块化
什么是模块化?
CommonJS标准
ECMAScript标准-默认导出和导入
ECMAScript标准-命名导出和导入
包的概念
npm -软件包管理器
npm -安装所有依赖
npm -全局软件包nodemon
Node.js总结
三、Webpack
什么是Webpack?
使用Webpack
修改Webpack打包入口和出口
自动生成html文件
打包CSS代码
优化-提取css代码
优化-压缩过程
打包less代码
打包图片
搭建开发环境
打包模式
打包模式的应用
前端-注入环境变量
开发环境调错- source map
解析别名alias
优化-CDN使用
多页面打包
优化-分割公共代码
一、Node.js入门
什么是Node.js?
定义：
作用：使用Node.js编写服务器端程序
- 编写数据接口，提供网页资源浏览功能等等
- 前端工程化：为后续学习Vue和React等框架做铺垫
什么是前端工程化?
前端工程化：开发项目直到上线，过程中集成的所有工具和技术
Node.js是前端工程化的基础( 因为Node.js可以主动读取前端代码内容)
Node.js为何能执行JS?
首先：浏览器能执行JS代码，依靠的是内核中的V8引擎(C++程序)
其次：Node.js 是基于Chrome V8引擎进行封装(运行环境)
区别：都支持ECMAScript标准语法，Node.js 有独立的API
注意：Node.js 环境没有DOM和BOM等
Node.js安装
要求：下载node-v16.19.0.msi安装程序(指定版本：兼容vue-admin-template模板)
安装过程：默认下一步即可
注释事项：
- 安装在非中文路径下
- 无需勾选自动安装其他配套软件
成功验证：
- 打开cmd终端，输入node-V命令查看版本号
- 如果有显示，则代表安装成功
使用Node.js
需求：新建JS文件，并编写代码后，在node环境下执行
命令：在VSCode集成终端中，输入node xxx.js，回车即可执行
总结：
1. Node.js是什么?
- 基于Chrome的V8引擎封装，独立执行JavaScript代码的环境
2. Node.js 与浏览器环境的JS最大区别?
- Node.js环境中没有BOM和DOM
3. Node.js 有什么用?
- 编写后端程序：提供数据和网页资源等
- 前端工程化：集成各种开发中使用的工具和技术
4. Node.js 如何执行代码?
- 在VSCode终端中输入：node xxx.js回车即可执行(注意路径)
fs模块-读写文件
模块：类似插件，封装了方法/属性
fs模块：封装了与本机文件系统进行交互的，方法/属性
语法：
- 加载fs模块对象.
- 写入文件内容
- 读取文件内容
/*** 目标：基于 fs 模块读写文件内容* 1. 加载 fs 模块对象* 2. 写入文件内容* 3. 读取文件内容*/
// 1. 加载 fs 模块对象
const fs = require("fs");
// 2. 写入文件内容
fs.writeFile("./test.txt", "hello, Node.js", (err) => {if (err) console.log(err);else console.log("写入成功");
});
// 3. 读取文件内容
fs.readFile("./test.txt", (err, data) => {if (err) console.log(err);// data 是 buffer 16 进制数据流对象// .toString() 转换成字符串else console.log(data.toString());
});
path模块-路径处理
问题：Node.js 代码中，相对路径是根据终端所在路径来查找的，可能无法找到你想要的文件
建议：在Node.js代码中，使用绝对路径
补充：__dirname 内置变量(获取当前模块目录-绝对路径)
- windows: D:\备课 代码\3- B站课程\03_ Node.js 与Webpack\03-code\03
- mac:/Users/xxx/Desktop/备课代码/3-B站课程/03_ Node.js 与Webpack/03-code/03
注意：path.join()会使用特定于平台的分隔符，作为定界符，将所有给定的路径片段连接在一起
语法：
- 加载path模块
- 使用 path.join方法，拼接路径
案例-压缩前端html
需求：把回车符(\r) 和换行符(\n)去掉后，写入到新html文件中
步骤：
- 读取源html文件内容
- 正则替换字符串
- 写入到新的html文件中
URL中的端口号
URL：统一资源定位符，简称网址，用于访问服务器里的资源
端口号：标记服务器里不同功能的服务程序
端口号范围：0-65535之间的任意整数
注意：http协议，默认访问80端口
常见的服务程序
Web服务程序：用于提供网上信息浏览功能
注意：0-1023和一些特定端口号被占用，我们自己编写服务程序请避开使用
总结：
1. 端口号的作用?
- 标记区分服务器里不同的服务程序
2. 什么是Web服务程序?
- 提供网上信息浏览的程序代码
http模块-创建Web服务
需求：创建Web服务并响应内容给浏览器
步骤：
- 加载http模块，创建Web服务对象
- 监听 request请求事件，设置响应头和响应体
- 配置端口号并启动Web服务
- 浏览器请求http://localhost:3000测试（localhost：固定代表本机的域名）
案例-浏览时钟
需求：基于Web服务，开发提供网页资源的功能
步骤：
- 基于http模块，创建Web服务
- 使用req.url获取请求资源路径，判断并读取index.html里字符串内容返回给请求方
- 其他路径，暂时返回不存在的提示
- 运行Web服务,用浏览器发起请求测试
/*** 目标：基于 Web 服务，开发提供网页资源的功能* 步骤：* 1. 基于 http 模块，创建 Web 服务* 2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方* 3. 其他路径，暂时返回不存在提示* 4. 运行 Web 服务，用浏览器发起请求*/
const fs = require('fs')
const path = require('path')
// 1. 基于 http 模块，创建 Web 服务
const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {// 2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方if (req.url === '/index.html') {fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => {res.setHeader('Content-Type', 'text/html;charset=utf-8')res.end(data.toString())})} else {// 3. 其他路径，暂时返回不存在提示res.setHeader('Content-Type', 'text/html;charset=utf-8')res.end('你要访问的资源路径不存在')}
})
server.listen(8080, () => {console.log('Web 服务启动成功了')
})二、Node.is模块化
什么是模块化?
定义：
概念：项目是由很多个模块文件组成的
好处：提高代码复用性，按需加载，独立作用域
使用：需要标准语法导出和导入进行使用