构建 Webpack 知识体系 ｜ 青训营

为什么要学习Webpack?

• 理解前端“工程化"概念、工具、目标
• 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
• 高阶前端必经之路

文章主要内容

01.什么是Webpack

但是，

• 依赖手工，比如有50个JS文件…操作，过程繁琐
• 动当代码文件之间有依赖的时候，就得严格按依赖顺序书写
• 开发与生产环境十致，难以接入TS或JS新特性
• 比较难接入Less、Sass等工具
• JS、图片、CSS资源管理模型不一致

这些都是旧时代非常突出的问题，对开发效率影响非常大，直到。。。

Webpack的作用

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

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

02.使用Webpack

小示例

核心流程

1. 入口处理
   1. 从entry文件开始，启动编译流程
2. 依赖解析
   1. 从entry文件开始,根据’requireorimport等语句找到依赖资源
3. 资源解析
   1. 根据module配置，调用资源转移器，将. png .css 等非标准JS资源转译为JS内容
4. 资源合并打包
   1. 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

模块+一致性

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

使用Webpack

流程类的配置

配置总览

https://webpack.js.org/configuration/

处理CSS

Loader

• Loader有什么作用?为什么这里需要用到css-loader、style-loader
• 与旧时代——在HTML文件中维护css 相比,这种方式会有什么优劣处?
• 有没有接触过Less、Sass、Stylus这一类CSS预编译框架?如何在 Webpack接入这些工具?

参考资料

• https://github.com/webpack-contrib/css-loader
• Webpack 原理系列七：如何编写loader
• style-loader | webpack

接入Babel

Babel是一个JavaScript编译器，允许开发人员使用最前沿的JavaScript编写代码，然后Babel将其转换为老式的JavaScript，让更多的浏览器能够理解。

• Babel具体有什么功能?
  1. 语法转换：Babel可以将使用了最新语法的JavaScript代码转换为向后兼容的旧版本代码，以确保在不支持新语法的旧版浏览器中也能正常运行。
  2. 源码转换：Babel可以将使用了新的API或语法特性的源码转换为等效的旧版本代码，以便在不支持这些新特性的环境中也能正常运行。
  3. 插件支持：Babel支持通过插件来扩展其功能，开发者可以根据自己的需求编写自定义插件，用于实现特定的转换或功能。
  4. 构建工具集成：Babel可以与各种构建工具（如Webpack、Rollup等）无缝集成，以便在项目构建过程中自动进行代码转换。
• Babel 与 Webpack 分别解决了什么问题?
  1. Babel的问题解决：Babel主要解决了JavaScript语法兼容性的问题。它可以将使用了最新语法的JavaScript代码转换为向后兼容的旧版本代码，以确保代码在不支持新语法的旧版浏览器中也能正常运行。
  2. Webpack的问题解决：Webpack主要解决了前端项目的模块化打包问题。它可以将项目中的各个模块按照依赖关系进行打包，生成最终的静态资源文件，以便在浏览器中加载和执行。
• 为何两者能协作到一起了?
  1. Babel作为一个编译器，可以将新版本的JavaScript代码转换为旧版本代码。而Webpack可以将项目中的各个模块打包成静态资源文件。因此，Babel可以在Webpack的打包过程中先对JavaScript代码进行转换，然后再由Webpack进行打包处理。
  2. Babel和Webpack都支持插件机制。开发者可以通过Babel插件来实现特定的转换或功能，同时也可以通过Webpack插件来扩展Webpack的功能。这使得两者可以通过插件的方式进行集成和扩展，实现更灵活和定制化的功能。

关于Babel

参考资料：

• https://webpack.js.org/loaders/babel-loader/
• https://babeljs.io/
• https://babeljs.io/docs/en/babel-preset-env
• https://babeljs.io/docs/en/babel-preset-react
• https://babeljs.io/docs/en/babel-preset-typescript

生成HTML

相比于手工维护HTML内容，这种自动生成的方式有什么优缺点?
https://webpack.js.org/plugins/html-webpack-plugin/

工具线

HWR

更改立刻呈现浏览器上

Tree-Shaking

Tree-Shaking一树摇，用于删除Dead Code

本笔记记录来源于范文杰大大在字节青训营中讲的视频