Node.js和webpack入门-个人学习笔记
Node.js-入门
Node.js基础
概念
Node.js是一个跨平台 JavaScript运行环境，是开发者可以搭建服务器端的 JavaStript应用程序。
作用
1.编写服务端程序
2.编写数据接口，提供网页浏览资源等等
3.实现 “前端工程化”，为Vue和React等框架做铺垫
前端工程化-概念
开发项目直到上线，过程中集成的所有工具和技术。
（Node.js 是前端工程化的基础（因为 Node.js 可以主动读取前端代码内容））
前端工程化包括：格式化工具、打包工具、压缩工具、转换工具、脚手架工具、自动化部署工具等等
模块
类似插件，封装了方法/属性，本身node里自带
Node.js 为何能执行 JS？
首先
浏览器能执行 JS 代码，依靠的是内核中的 V8 引擎（C++ 程序）
其次
Node.js 是基于 Chrome V8 引擎进行封装（运行环境）
区别
都支持 ECMAScript 标准语法，Node.js 有独立的 API //最大区别：Node.js 环境没有 DOM 和 BOM 等操作
开启方法
选择运行文件-右键-在集成终端打开-输入“node 自身文件全名”-cls清空-ctrl+c结束终端运行
fs 模块 - 读写文件
fs 模块概念
封装了与本机文件系统进行交互的方法/属性。
语法步骤
1. 加载 fs 模块对象
const fs = require('fs')
//fs是模块标识符：模块的名字2. 写入文件内容
fs.writeFile('文件路径','写入内容', err =>{
//写入后的回调函数
})3. 读取文件内容
fs.readFile('文件路径', (err, data) =>{
//十六进制的内容展示
//读取后的回调函数
// data 是 buffer 16 进制数据流对象
// .toString() 转换成字符串path模块-路径处理
注意
Node.js 代码中，相对路径是根据终端所在路径来查找的，不是用VScode资源管理器查找的，可能无法找到你想要的文件。
需要在Node.js代码中使用 绝对路径 进行查找。
语法
1、加载path模块
const path = require('path')2、使用 path.join 方法，拼接路径
path.join('路径1','路径2','路径3',……)3、如果需要fs模块读取路径（路径表示为：）
path.join(__dirname, '../test.txt')说明
path.join() 会使用特定于平台的分隔符，作为定界符，将所有给定的路径片段连接在一起。
展示
path.join('03','dist/js','index.js')
结果为：windows:'03\dist\js\index.js'
补充
__dirname,'模块目录-绝对路径' //注意：是两个下划线
http 模块-创建 Web 服务
步骤
1. 加载 http 模块，创建 Web 服务对象
2. 监听 request 请求事件，设置响应头和响应体
3. 配置端口号并启动 Web 服务
4. 浏览器请求 http://localhost:3000 测试
（localhost：固定代表本机的域名）
语法（对照上面）
1、
const http = require('http')
const server = http.createServer()2、
server.on('request', (req, res) => {
// 设置响应头-内容类型-普通文本以及中文编码格式
res.setHeader('Content-Type', 'text/plain;charset=utf-8')
// 设置响应体内容，结束本次请求与响应
res.end('欢迎使用 Node.js 和 http 模块创建的 Web 服务')
})3、
server.listen(端口号, () => {
console.log('Web 服务启动成功了')
})注意
text/plain是普通文本；
text/html是超文本（包含普通）
web端口服务
80/3000/8080： 内容数据、获取数据、网页数据、音频数据
3306：数据库数据
Node.js-模块化
node.js模块化
定义
CommonJS 模块是为 Node.js打包 JavaScript代码的原始方式。Node.js 支持浏览器和其他 JavaScript运行时使用的 ECMAScript模块标准。
（在 Node.js 中，每个文件都被视为一个单独的模块。 简略来说模块化就是每个文件都是一个单独的模块）
概念
项目是由很多个模块文件组成的。
好处
1.提高代码复用性；2.按需加载；3.独立作用域。
使用
需要标准语法导出和导入进行使用——联系彼此模块。
标准语法：CommonJS标准
定义文件名
utils.js
导出
module.exports = {}
导入
require('模块名或路径')
注意
1.最好util.js文件导出，其它文件导入；
2.Node.js 默认支持 CommonJS 标准语法。
语法
1、创建模块
//在需要导出的文件中创建
const baseURL = 'http://网址路径'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)2、导出
module.exports = {
url: baseURL,
arraySum: getArraySum
}3、导入
//在需要导入的文件输入
const obj = require('模块名/路径')
//obj就等于 module.exports 导出的对象
//模块名或路径：
//内置模块：直接写名字（例如：fs，path，http）
//自定义模块：写模块文件路径（例如：./utils.js）ECMAScript 标准：（ES6）
默认和命名的选择
1、按需加载，使用命名导出和导入
2、全部加载，使用默认导出和导入
3、同时用也可以
一、默认
默认导出和导入
1. 导出：export default {}
2. 导入：import 变量名 from '模块名或路径'
语法
注意
1.Node.js 默认支持 CommonJS 标准语法(Webpack则不同)；
2.如需使用 ECMAScript 标准语法，在运行模块所在文件夹新建 package.json 文件，并设置 { "type" : "module" }
1、创建定义模块
const baseURL = 'http://网址地址'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)2、默认导出
export default {
url: baseURL,
arraySum: getArraySum
}3、默认导入
import obj from '模块名/路径'
//obj就等于 export default 导出的对象注意
模块名或路径：
内置模块：直接写名字（例如：fs，path，http）
自定义模块：写模块文件路径（例如：./utils.js）
二、命名
命名标准使用
1. 导出：export 修饰定义语句
2. 导入：import { 同名变量 } from '模块名或路径'
语法
注意
1.Node.js 默认支持 CommonJS 标准语法；
2.如需使用 ECMAScript 标准语法，在运行模块所在文件夹新建 package.json 文件，并设置 { "type" : "module" }
1、创建定义模块 并命名导出
export const baseURL = '网址地址'
export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)2、命名导入（{}里写同名变量）
import {baseURL, getArraySum} from '模块名/路径'
//{baseURL, getArraySum}就等于 export导出的对象注意
模块名或路径：
内置模块：直接写名字（例如：fs，path，http）
自定义模块：写模块文件路径（例如：./utils.js）
包的概念
概念
将模块，代码，其他资料聚合成一个文件夹。
分类
1、项目包：主要用于编写项目和业务逻辑
2、软件包：封装工具和方法进行使用
写法
1、根目录中，必须有（创建） package.json 文件（记录包的清单信息）
2、在package.json 文件写入
{
"name": "cz_utils", //软件包名称
"version": "1.0.0", //软件包当前版本
"description": "一个数组和字符串常用工具方法的包", //软件包的简短描述
"main": "index.js", //软件包唯一入口点（指定指向文件）
"author": "xxx", //软件包作者
"license": "MIT" //软件包许可证（商用后可以用作者名字宣传）
}注意
1.导入软件包时，引入的默认选择的是 index.js 模块文件 / （没有的话就找）main 属性指定的模块文件；
2.基本上入口和出口都是index.js文件，而index.js文件作用：把所有工具模块方法先集中起来，再统一向外暴露。
index步骤
(基于CommonJS标准)
1、将所有的工具模块都 导入 到index.js文件
2、将对应定义导入 都进行解构赋值（不然会有嵌套问题）
3、统一导出 所有函数
（4、在需要导入的文件中使用导入， 导入 utils 软件包，使用里面封装的工具函数，会自动在utils文件夹里找index文件）
npm（软件包管理器）
npm
定义
npm 是 Node.js 的标准包管理器。
据报道，在 2022 年 9 月，npm 注册表中列出了超过 210 万个软件包，使其成为最大的单一语言代码存储库，而且你可以确定（几乎）所有一切都有软件包。
它最初是作为一种 “下载和管理 Node.js 包” 依赖的方式，但后来成为前端 JavaScript 中也使用的工具。
使用方法
1. 初始化清单文件
在终端中输出： npm init -y （得到 package.json 文件，如果本身有这个文件则略过此命令）
注意
创建的包名最好不要有中文，不然初始化时package文件无法初始出信息
2. 下载软件包 (node_modules)
在终端中输出： npm i 软件包名称 （会从npm资源库下载并自动生成node_modules文件夹，里面包括对应包源码）
（npm 会将对应信息记录到 package.json 中并生成一个package-lock.json文件来固化版本）
3. 使用软件包（项目文件导入）
npm-安装所有依赖
问题
当项目中不包含 node_modules，能否正常运行？
答案
不能，缺少依赖的本地软件包
原因
因为自己用 npm “下载依赖”比磁盘传递拷贝要“快得多”
场景
一般拿到别人的项目后，只有 package.json 缺少 node_modules 时需要做.
解决方法
项目终端输入命令
npm i
（下载 package.json 中记录的所有软件包）
效果
会根据 package.json 记录的所有包和版本开始下载
npm-全局软件包nodemon
软件包包括
1、本地软件包：当前项目内使用，封装 “属性和方法” ，存在于 node_modules (如：dayjs、loadash等等)
2、全局软件包：本机所有项目使用，封装 “命令和工具” ，存在于 “系统设置的位置”
全局软件包nodemon的作用
替代 node 命令，检测代码更改，自动重启程序（不用我们手动结束进程再重启）
注意
只用封装了 命令 的软件包才能安装到全局环境中
使用方法
1. 安装
（记得看有没有modules，没有就下载）
终端输入：npm i nodemon -g //（-g 代表安装到全局环境中）
2. 运行
nodemon 待执行的目标 js 文件
(就是写：nodemon 待执行的目标 js 文件路径)
（启动后，修改代码，保存后观察终端效果）
3. 删除软件包
//看是否需要
npm uni 软件包名
Webpack入门-基础运用
Webpack
概念
webpack 是一个用于现代 JavaScript 应用程序的 “静态模块打包工具” 。
（本身是全局软件包，使用ECMAScript 标准）
当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
（webpack默认只识别js代码）
静态模块
指的是编写代码过程中的，html，css，js，图片等固定内容的文件。
打包
把静态模块内容，压缩，整合，转译等（前端工程化）
整合
把多个css或js合并到一个文件，减少用户浏览器的http请求次数，更快访问网页
转译
1.把 less / sass 转成 css 代码
2.把 ES6+ 降级成 ES5
3.支持多种模块标准语法
终端输入提示
1、清理终端显示：cls
2、终止终端进程：Ctrl+c
用法
1、新建初始化项目
2、下载 webpack webpack-cli 到当前项目中（版本独立），并配置局部自定义命令
2.1终端写入：
npm i webpack webpack-cli --save-dev
(--save-dev:表明在开发环境下使用)
2.2自定义命令：在package.json文件中找到 scripts 写入：
//目的：执行webpack，从而启动打包过程
scripts: {"build":"webpack"}3、 运行-打包-命令，自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）
终端输入 打包 命令：
npm run build修改打包入口(entry)和出口(output)
一、入口entry
入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。
进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。
二、出口output
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
整体步骤
(Webpack 配置：影响 Webpack 打包过程和结果)
1、
项目根目录，新建 webpack.config.js 配置文件
2、
在config.js 文件中导出“配置对象”，配置入口，出口文件的路径
配置对象
const path = require('path');
module.exports = {
//入口(这里用绝对路径)
entry: path.resolve(__dirname, 'src/login/index.js'),
//出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: './login/index.js',
clean: true // 生成打包后内容之前，清空（上一次）输出目录
},
};3、
重新打包观察 (终端输入：npm run build)
注意
只有和入口产生直接/间接的引入关系，才会被打包。
HtmlWebpackPlugin
说明
HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。
这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。
你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。
插件说明
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
如果你有多个 webpack 入口，他们都会在已生成 HTML 文件中的