前端工程化(webpack)
第一部分：组件、模块、工程化的区别
前端工程化既是模块化：对所有的资源进行统一管理，对开发者的开发习惯进行统一的梳理，达到自动化，工程化
模块化出现的原因（传统开发的主要问题）：
1-命名的冲突 2-文件的依赖问题
模块化:
模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互的隔离，但是可以通过特别的接口公开内部成员，也可以依赖别的模块，大模块由小模块组成，代码重用，耦合性低，方便后期的维护。
模块化的好处：
1方便代码的重用，提高开发效率 2方便后期的维护
2 组件化： 组件化按照系统的关注点进行拆分 比如系统使用下拉框 modal模态窗口 警告提醒 表格等
把这些常用的功能集合（含有HTML结构 CSS呈现 JS逻辑操作）进行封装，最用使用的时候。
第二部分：ES JS NODE.JS之间的区别
第三部分：⭐ES6模块化规范（重点）⭐
第三部分（1）：Babel第三方包，可以将高级的JS语法转换为低级的JS语法
安装步骤：
第一步： 打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
第二步： 安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill
注意：如果npm安装上诉包不成功，就使用cnpm
但是需要安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
配置文件：
在项目目录中创建babel.config.js文件。
编辑js文件中的代码如下：
const presets = [
["@babel/env",{
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
]
//暴露
module.exports = { presets }
第三步：创建index
在项目目录中创建index.js文件作为入口文件
在index.js中输入需要执行的js代码，例如：
console.log("ok");
第四步：在终端中执行
打开终端，输入命令：npx babel-node ./index.js
第五步：效果展示
1 每一个JS文件都是一个独立的模块
2 导入模块成员 使用 import 关键字
3 暴露模块成员 使用 export 关键字
第三部分（2）：ES6 默认导出和默认导入
注意：
1 - Export default 默认导出的成员（每个模块只可以使用唯一一次的，否则会报错）
2- 如果一个文件中没有导出，则会返回一个空对象 { }
默认导出语法：
export default { 需要导出的成员}
默认导入语法：
Import 接收名称 from ‘模块标识符’
第三部分（3）：ES6 按需导出和按需导入
按需导出：一个模块中可以使用多次，默认导出不可以
按需导出语法 export var s1 = 10
按需导入语法 import { s1} from ‘模块标识符’ （按需导入的名称必须和按需导出的名称一致，不能乱写。但是可以用as 起别名）
第三部分（4）：直接导入并执行模块代码
只是单纯的执行某个模块中的代码。并不需要得到模块向外暴漏的成员，此时可以直接导入并执行模块代码
第四部分：webpack（重点）⭐⭐
可以进行很友好的 模块化支持 代码压缩混淆 处理JS兼容问题 性能优化等
webpack的好处： 提高开发效率和项目的可维护性
npm init -y 初始化包管理
打包前后对比：
第四部分（1）：如何在项目中设置webpack
配置准备：
第三步：mode有两种：
**- development：**开发模式，打包的代码不会压缩和混淆
**- production：**生产模式（正式上线模式），打包的代码会压缩和混淆
第四部分（2）：配置打包的入口和出口
默认的打包出口和入口：