webpack知识体系 | 青训营笔记

realian
59 阅读4分钟

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

课堂笔记

视频地址

ppt地址 ‍‬‬‌⁤⁣⁡⁢‬‬⁡⁣​⁣⁤‍⁢⁢‬⁢‬⁢⁤​​⁢‌​⁤⁤‬‬​⁣⁣‬⁢‬​‍⁤‬‌⁤‬‍⁣Webpack 知识体系.pptx - 飞书云文档 (feishu.cn)

课程简介

由浅入深，从应用技巧到组件开发，再到 Webpack 构建流程的基本原理剖析，最后总结一套学习方法论，帮助读者 0 基础搭建 Webpack 知识体系。

image.png

课前准备

安装浏览器

  1. 请下载安装最新版本 NodeJS 环境；
  2. 请下载安装一个「现代」浏览器，比如 Chrome、Firefox、Edge 等。推荐使用最新版的 Chrome 浏览器。

安装编辑器

要进行前端开发，一个趁手的编辑器必不可少。强烈推荐使用 Visual Studio Code，如果你习惯使用其它编辑器也是可以的。

提前阅读

课前建议先充分了解 Webpack 的基本功能与作用，参考资料：Webpack 官网，建议根据官网文档手动搭建若干示例。

一、本堂课重点内容：

理解 Webpack 的基本用法
通过介绍 Webpack 功能、Loader 与 Plugin 组件设计，建立一个知识体系

二、详细知识点介绍：

什么是Webpack

前端项目通常由很多资源构成，例如PNG、JPG、GIF、WEBP、JS、TS、CSS、Less、Vue、JSX、Sass等，但在旧时代需要在页面内直接手动管理这些资源
1.依赖手工，过程繁琐
2.当代码文件之间有依赖的时候，就得严格按依赖顺序书写
3.开发与生产环境一致，难以接入TS或JS新特性
4.比较难接入Less、Sass等工具
5.JS、图片、CSS资源管理模型不一致
这些突出的问题，对开发效率影响非常大，因此出现了很多工程化工具，某种程度上，正是这些工具的出现，才有了“前端工程”这一概念。

Webpack本质上是一种前端资源编译、打包工具
1.多份资源文件打包成一个 Bundle
2.支持 Babel、Eslint、TS、CoffeScript、Less、Sass
3.支持模块化处理 CSS 、图片等资源
4.支持 HMR + 开发服务器
5.支持持续监听、持续构建
6.支持代码分离
7.支持 Tree-shaking
8.支持 Sourcemap
...

使用Webpack

示例

1.安装

npm i -D webpack webpack-cli

2.编辑配置文件

（webpack.config.js）
module.exports = {
  entry: 'main.js',
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  }
  module: {
    rules:[{
      test: /.less$/i,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  }
}

3.执行编译命令

npx webpack

核心流程

image.png

模块化 + 一致性

Webpack 本质上就做了两件事情：模块化 + 一致性

1.多个文件资源合并成一个，减少 http 请求数
2.支持模块化开发
3.支持高级 JS 特性
4.支持 TypeScript、CoffeeScript 方言
5.统一图片、CSS、字体等其他资源的处理模型
...

配置

关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
1.流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
2.工具类：主流程之外，提供更多工程化能力的配置项

image.png

使用频率高的有：
1.entry/output
2.module/plugins
3.mode
4.watch/devServer/devtool

Webpack配置官方文档

处理CSS

文件结构

-src
	-index.js
	-index.css
-webpack.config.js

index.js

const styles = require('./index.css');
// or
import styles from './index.css'

1.安装Loader

npm add -D css-loader style-loader

2.添加module处理CSS文件

（webpack.config.js）
const path = require("path");

module.exports = {
  entry: './src/index',
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  }
  module: {
    // css 处理器
    rules:[{
      test: /.css/i,
      use: [
	    'style-loader', 
	    'css-loader',
      ],
    }],
  },
};

接入Babel

Babel本质上是JS代码转译的工具

文件结构

-src
	-index.js
-webpack.config.js

index.js

class Person {
    constructor() {
        this.name = 'Tecvan'
    }
}

console.log((new Person()).name)
const say = () => {}

1.安装依赖

npm i -D @babel/core @babel/preset-env babel-loader

2.声明产物出口output

（webpack.config.js）
const path = require("path");
module.exports = {
  entry: './src/index',
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  },
  module: {
    rules:[{
      test: /.js?$/,
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env'
            ]
          ]
        }
      }, ],
    }],
  },
};

3.执行npx webpack

生成HTML

文件结构

-src
	-index.js
-webpack.config.js

1.安装依赖

npm i -D html-webpack-plugin

2.声明产物出口output

（webpack.config.js）
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index',
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  }
  plugin: [new HtmlWebpackPlugin()]
};

3.执行npx webpack

HMR

Hot Module Replacement——模块热替换
修改代码后不需要刷新就会显示
1.开启HMR

（webpack.config.js）
module.exports = {
  // ...
  devServer: {
    hot: true
  }
};

2.启动Webpack

npx webpack serve

Tree-Shaking

树摇，用户删除Dead Code

开启 tree-shaking：
1.mode: "production"
2.optimization.usedExports: true

其他工具

缓存、Sourcemap、性能监控、日志、代码压缩、分包…

理解Loader

Webpack 只认识 JS
为了处理非标准 JS 资源，设计出资源翻译模块 —— Loader，用于将资源翻译为标准 JS

使用Loader

文件结构

-src
	-a.less
	-b.less
	-index.js
-webpack.config.js

index.js

import styles from './a.less'

1.安装Loader

npm add -D css-loader style-loader less-loader

2.添加module处理css

module.exports = {
  module: {
    rules:[
      {
        test: /.less%/i,
        use: [
	      'style-loader', 
	      'css-loader',
	      'less-loader',
        ],
      },
    ],
  },
};

链式调用

image.png

less-loader: 实现less => css的转换
css-loader: 将CSS包装成类似module.exports = "${css}" 的内容，包装后的内容符合JavaScript 语法
style-loader**：**将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签

其他特性

1.链式执行
2.支持异步执行
3.分 normal、pitch 两种模式

如何编写Loader

module.exports = function(source, sourceMap?, data?) {
	// source 为 loader 的输入
	// 可能是文件内容，也可能是上一个 loader 处理结果
	return source;
};

常见Loader

image.png

理解插件

image.png

插件架构精髓：对拓展开放，对修改封闭

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

image.png

三、引用参考：

前端入门——工具篇

四、课后阅读材料

、

avatar
文章
阅读
粉丝