来晚了，现在结束实习现在开始补课（狗头保命）

• 什么是webpack?
  webpack是一个现在的javaScript应用的静态模块化打包工具。webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系
  webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。 不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。并且在打包的过程中，还可对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

webpack安装

1. 首先要安装Node.js，Node.js自带了软件包管理工具npm
2. 编辑配置文件
3. 执行编译命令

文件配置

1. 文件和文件夹解析
2. 命令
   webpack ./src/main.js ./dist/bundle.js(将main.js文件打包成bundle.js文件)
3. 创建webpack.config.js文件简化打包命令
   配置大体分为流程类和工具类

webpack使用

流程类配置

输入→模块解析→模块转译→后处理

利用loader处理css

• 安装Loader:npm install -D css-loader style-loader
• 在src目录中，创建一个css文件，其中创建一个normal.css文件,在入口文件引用
• 在webpack.config.js中的module关键字下进行配置

• 什么是loarder？
  将webpack扩展对应的loader，使其具有也将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等功能。

ES6转ES5的Bable

1. 安装依赖
2. 声明产物出口
3. 执行命令

工具类使用

HMR

HMR允许开发人员在不刷新页面的情况下更新模块,可以节省大量时间，同时也可以提高开发效率。

1. 启用

webpack.config.js
 
module.exports = {
 devServer: {
    hot: true
  }
}

Tree-Shaking

用于删除Dead Code Webpack 中，Tree-shaking 的实现一是先标记出模块导出值中哪些没有被用过，二是使用 Terser 删掉这些没被用到的导出语句。

• Make 阶段，收集模块导出变量并记录到模块依赖关系图 ModuleGraph 变量中
• Seal 阶段，遍历 ModuleGraph 标记模块导出变量有没有被使用
• 生成产物时，若变量没有被其它模块使用则删除对应的导出语句

总结

我是第一次知道webpack，所以很多地方都不太明白，去搜了一些课程里提到的工具，仅是理论了解，笔记写的也不完善，大家看看就行。