这是我参与第五届青训营伴学笔记创作活动的第15天
理解Webpack基本用法
介绍Webpack功能 Loader Plugin组件设计，建立知识体系
Webpack为什么要学习
- 理解前端工程化概念工具目标
- 核心竞争力
- 高阶前端必经之路

Webpack做什么

工程化工具

本质是前端资源编译打包工具

使用Webpack

安装依赖 npm i -D webpack webpack-cli
编辑配置文件

// webpack.config.js
const path = require('path');

module.exports = {
  // 项目入口
  entry: './src/index', 
  mode: 'development',
  devtool: 'false',
  // 当前项目打包后的输出文件
  output: {
    // 打包后的文件名
    filename: '[name].js',
    path: path.resolve(__dirname, './dist')
  }
};

执行编译命令 npx webpack

核心流程

模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript CoffeeScript方言
- 同意图片 css 字体等其他资源的处理模型
- Etc。。。

配置文件

大致分为两类流程类工具类
配置总览
起步 | webpack 中文文档 (docschina.org)

流程类

作用于流程中某个or若干个环节，直接影响打包效果的配置项
loader 处理不同文件资源的组件
接入css-loader
1. cnpm i -D css-loader style-loader
2. 定义css-loader处理器
3. npx webpack
接入Babel
1. 安装依赖 npm i-D @babel/core @babel/preset-env babel-loader
2. 声明产物出口 output
3. 执行npx webpack

module: {
    rules: [
      // css-loader: 解析css文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // babel-loader: 解析js文件
      {
        test: /\.js$/,
        use:{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

生成HTML
相比于手工维护HTML内容，自动生成有什么优缺点？
1. 安装依赖cnpm i -D html-webpack-plugin
2. 声明产物出口 output
```
  // 模块解析 【可选】
  plugins: [
    // html-webpack-plugin: 生成html文件
     new HtmlWebpackPlugin()
  ],
```
1. npx webpack

工具类

主流程之外，提供更多工程化能力的配置项

热模块替换HMR

module.exports = {
   // 开发服务器配置 【可选】
  devServer: {
    // 热更新
    hot: true,
    // 自动打开浏览器
    open: true
  }, 
  // 监听文件变化 【可选】
  watch: true,
}

Tree-Shaking
Dead Code 在代码中却没用到的删掉
对工具类库Loadash有奇效

module.exports = {
  // 模式 【必须】
  mode: 'production',
  // Tree Shaking 【可选】
  optimization: {
    // 去除未使用的代码
    usedExports: true
  },
}

理解Loader

详细内容请关注微信公众号 Tecvan 字节跳动前端工程师文杰写的非常不错
问题Webpack只认识JS代码
Loader是为了处理非标准JS资源，设计出资源翻译模块，用于将资源翻译为标准的JS

链式调用
其他特性

如何编写Loader
基本结构

Loader输入是什么？要求输入是什么？ Loader的链式调用是什么？如何串联多个Loader？ Loader中如何处理异步场景

理解插件

插件精髓：对扩展开放，对修改封闭
webpack本身很多功能都是插件实现的

使用插件

写一个插件
1. 插件围绕 “钩子” 展开
2. 钩子的核心信息
  1. 时机: 编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情;
    - compier.hooks.compilation
  2. 上下文: 通过 tapable 提供的回调机制，以参数方式传递上下文信息
    - compilation等
  3. 交互 : 在上下文参数对象中附带了很多存在side effect 的交互接口，插件可以通过这些接口改变
    - dependencyFactories.set

学习路线

关注公众号Tecvan

Webpack知识体系 | 青训营笔记

Webpack做什么

使用Webpack

配置文件

流程类

工具类

理解Loader

理解插件

学习路线