模块化

在 Node.js 中，每个文件都被视为一个单独的模块,
CommonJs 模块是为 Node.js 打包 Javascript 代码的原始方式。Nodejs 还支持浏览器和其他 JavaScript 运行时使用的 ECMAScript 模快标准

在node.js中，每一个js文件，都被划分为一个模块

概念：项目是由多个模块组成

好处，提高代码的复用性，按需加载，独立作用域

使用：需要标准语法导出和导入使用

commmon.js标准

使用:
1.导出: module.exports = 2.导入: require(模块名或路径)
模块名或路径:
内置模块:直接写名字(例如: fs，path，http)自定义模块:写模块文件路径(例如:./utils.js)

ecmaScript默认导入导出

导出export default{}

导入import变量名from'模块名路径'

注意:Nodejs默认支持 CommonJS 标准语法
如需使用ECMAScript 标准语法，在运行模块所在文件夹新建 packagejson 文件，并设置"type":"module"]

ecmaScript命名导入导出

命名标准使用:
1.导出: export 修饰定义语句2.导入: import{ 同名变量]from 模块名或路径

如何选择

按需加载，使用命名导入和导出

npm软件包管理器

初始化清单文件：npm init  -y （得到package.json文件，有则略过此命令）

下载软件包：npm i 软件包的名称

使用软件包：

npm：安装所有依赖

解决：项目终端输入命令 npm i  下载package json

软件包：
软件包区别:
本地软件包:当前项目内使用，封装属性和方法，存在于node modules

全局软件包:本机所有项目使用，封装命令和工具，存在于系统设置的位置

nodemon 作用:替代 node 命令，检测代码更改，自动重启程序

安装：npm  i  nodemon-g （-g代表安装到全局路径中里面去）

运行：nodemon待执行的目标，js文件

需求，启动准备好的项目，修改代码保存之后，观察自动启动程序

node.js包模块文件，代码文件，聚合一个包

项目包:编写项目需求和业务逻辑的文件夹
软件包:封装工具和方法进行使用的文件夹(一般使用 npm 管理

删除软件包 npm -uni 软件包名

什么是 Webpack?
定义:
本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。
静态模块:指的是编写代码过程中的，html，css，js，图片等固定内容的文件打包:把静态模块内容，压缩，整合，转译等(前端工程化)

把less / sass 转成 css 代码把ES6+降级成ES5
支持多种模块标准语法
问题:为何不学 vite ?
因为:很多项目还是基于Webpack 构建，并为 Vue
React脚手架使用做铺垫!

修改webpack打包入口和出口‘

自动生产html文件

htmlwebpackplugin

webpack打包css

加载器 css—loader解析css代码

加载器 css-style-loader 把解析后的css插入到dom中

配制webpack

安装webpack@5

优化

搭建环境