这是我参与「第五届青训营」伴学笔记创作活动的第 11 天

本堂课重点内容

本堂课重点讲述了Webpack定义、Webpack打包流程、Loader的使用、Plugin的使用、Webpack学习方法。

什么是Webpack

前端资源编译、打包工具 => 模块化、一致性
使用Webpack：安装--编译配置文件--执行编译命令
Webpack执行步骤：
1. 入口 entry
2. 依赖解析 require、import
3. 资源解析 module
4. 资源合并打包 output
- 2-3步递归执行，直到所有资源处理完毕
Webpack的配置项大致可以分为两类：
- 流程类：影响执行步骤，作用于某些流程
  - 输入：entry、context
  - 模块解析：resolve、externals
  - 模块转译：module
  - 后处理：optimization、mode、target
- 工具类：作用于执行步骤之外，提供工程化能力
  - 开发效率类（watch、devtool、devServer等）、性能优化类（cache、performance）、日志类（stats、infrastructureLogging）
Webpack配置属性至少必须要有：
- entry 入口
- output 出口
常见场景：
1. 处理css文件：在module属性的rules属性的use属性中定义处理css文件的loader序列“css-loader”和“style-loader”，test中设置过滤文件属性“/.css$/”
2. 接入Babel
- Babel作用：把高版本JS转译成低版本JS代码
- 安装babel依赖--声明产物出口“output”--执行“npx webpack”
- 与处理CSS一样，是要在module中定义相关属性的：
```
    module:{
        rules:[{
            test: /\.js?$/,
            use: [{
                loader: "babel-loader",
                options: {presets: [['@babel/preset-env']]}
            }]
        }],
    },
```
1. 生成HTML
- 使用插件 plugins: [new HTMLWebpackPlugin()]
1. 工具线
- 模块热替换 HMR ，页面无需刷新就能将立刻将新代码的效果更新显示出来 devServer: {hot:true, open:true}"npm webpack server"
- Tree-Shaking 删除没有用到的代码，对打包工具类库如Loadash有奇效
  
  简单方法：mode: "production",optimization: {useExports: true}
其他常见场景：缓存、Sourcemap、性能监控、日志、代码压缩、分包...

加载器Loader

Webpack只能识别JS代码，所以使用Loader把处理不同类型文件转换成JS资源
Loader是逐个进行、链式调用的，前一个loader的结果可能是后一个loader的输入，所以要使用许多个loader，如转换less文件需要用到less-loader、css-loader、style-loader三个loader
特点：链式调用、支持异步执行、有normal/pitchl两种模式
常用Loader
loader的执行流程，以less为例