这是我参与「第四届青训营」笔记创作活动的第3天

这篇文章是青训营-前端《Webpack认识》的课堂笔记。

为什么要学webpack

背景

来看看以前的项目是如何搭建的：

前端项目由什么构成？

由以下资源构成：

如何将这些资源创建和加入到一个具体的项目中呢？

依赖手工，比如有50个js文件导要入项目，是不是要一个一个手动导入呢？过程非常繁琐
当代码文件之间有依赖的时候，就得严格按依赖顺序书写
开发与生产环境一致，难以接入TS或JS新特性
比较难以接入Less，Sass等工具
JS，图片，css资源管理模型不一致

这些都是旧时代非常突出的问题，对于开发效率影响非常大，直到一些工具的诞生，才有了前端工程化的概念

什么是Webpack

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

本质上是一种前端资源编译、打包工具

多份资源文件打包成一个Bundle
支持Babel、Eslint、TS等
支持模块化处理css、图片等资源
支持HMR+开发服务器
支持持续监听、持续构建
支持代码分离
支持Tree-shaking
支持Sourcemap

image (1).png

使用 webpack

简单案例

安装后编辑配置文件
输入

npx webpack

解释：

entry:项目的入口，这里main.js是要被打包的文件
output项目的出口，这里dist是打包生成的文件

webpack工作的核心流程：

入口处理
从entry开始，启动编译流程
依赖解析
从entry文件开始，根据require or import等语句找到依赖资源
资源解析
根据module配置，调用资源转移其，将png, css等非标准JS资源转译为JS内容（递归调用第2、3步，直到所有资源处理完毕）
资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

createapp.dev是一个用于创建自定义 webpack 配置的在线工具。可以自行选择并生成的配置文件中的各种功能。此外，它还会根据提供的 webpack 配置生成一个示例项目，可以在浏览器中查看并下载。

HMR(Hot Module Replacement)

webpack——模块热替换可实现代码修改刷新后直接生成效果

使用HMR的配置：

开启HMR

// webpack.config.js
module.exports ={
  // ...
  devServer:{
    hot: true
  }
}
复制代码

启动webpack

npx webpack serve
复制代码

效果如下：

如果想要详细了解HMR的实现原理，那么请点击这里

核心流程

1.入口处理

从‘entry’文件开始,启动编译流程

2.依赖解析

从‘entry’文件开始，根据'require’or ‘import’等语句找到依赖资源

3.资源解析

根据‘module`配置,调用资源转移器，将png、css等非标准JS资源转译为JS内容

4.资源合并打包

将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

模块化+一致性

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

Tree-Shaking（树摇）

作用：用来删除 Dead code

Dead Code: 代码没有用到，代码的执行结果不会备用到，代码只读不写 Tree-Shaking：模块导出来了，但未被其他模块使用

下图中bar.js定义了3个常量，index.js引入了bar.js，实际上只引入了两个常量bar，bar2，index.js实际上只用到了bar，而Tree-Shaking就是把这种定义了但却没有实际用到的代码给删掉。

开启tree-shaking

// webpack.config.js
module.exports = {
  // ...
  mode: "production",
  optimization:{
    usedExports: true,
  }
}
复制代码

其他工具

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

loader组件

问题阐述：webpack只认识JS代码，对于图片，css样式等非JS代码它是无法识别的，会报错

解决：为了处理非标准JS资源，设计出资源翻译模块Loader，用于将资源翻译为标准JS，非JS资源转变为JS资源

loader使用：

安装loader

npm add -D css-loader style-loader less-loader
复制代码

添加module项处理css文件

module.exports ={
  module: {
    rules:{
      test: /.less$/i,
      use: [
        "style-loader",
        "css-loader",
        "less-loader",
      ],
    },
  },
}
复制代码

认识loader的链式调用：

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

loader特点

链式执行
支持异步执行
分normal，pitch两种模式

参考：webpack原理-如何编写loader

常用loader

站在使用角度，掌握这些常见的Loader的功能，配置方法

Webpack认识｜青训营笔记