这是我参与「第四届青训营 」笔记创作活动的第4天。
写在前面
Webpack is a module bundler.
作为前端工程化的工具链，webpack作为打包工具被广泛运用，那么为什么简单的脚本引入，或者是样式引入，需要通过webpack大包呢？那么其他打包工具vite跟rollup又有什么不一样呢？这些疑问可以从课程中得到解答。
什么是webpack
放一张webpack官网的图
首先，前端网页是有很多个资源文件组成的，比如说图片，比如说脚本、动图等，传统的引入方式存在下面的问题：
这时候就会出现许多不同的打包工具，为人熟知的有比如说webpack、vite、rollup、gulp这些。虽然在应用层面，这些应用都差不多，但是webpack作为现在最流行的打包工具之一，自然也会有一些优势，下面将展开阐述。
webpack支持类型
如何使用webpack
快速开始
- 首先安装webpack-cli依赖
npm i -D webpack webpack-cli
- 编辑配置文件
- 编译
npx webpack
当然具体还得具有内容 可以参看Getting start webpack.js.org/guides/gett…
作为新手使用webpack，需要了解的即是webpack的相关配置内容。
相关配置内容呢，又包括流程类的和工具类的配置，
模块配置
流程类的配置首先第一个就是entry编译入口了，下图也有很多关键的配置信息。
接入babel
ES5到ES6的跨度很大，在使用一些ES6标准比如说箭头函数=>的时候，为了兼容多种不同的浏览器，因此这时候是需要进行转译ES5的。在浏览器标准没有统一的时候，Babel无疑是增添了许多便利。在webpack当中也可以以loader的方式接入babel。
Tree-shaking
Tree-shaking通俗来说我想应该是指按需编译，这一点在vite上做的会比较好（感觉，
按需编译减少了代码的冗余，使得最后产出的代码会更加精简。
loader
loader是webpack里面比较核心的配置文件，用于将非js的标准转译为js。webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。 常用的loader有以下这些：
- file-loader：打包图片，打包字体图标
- url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL（提升网页性能）。
- css-loader：和图片一样webpack默认能不能处理CSS文件, 所以也需要借助loader将CSS文件转换为webpack能够处理的类型。解析css文件中的@import依赖关系,打包时会将依赖的代码复制过来代替@import。
- style-loader: 将css文件通过css-loader处理之后，将处理之后的内容插入到HTML的HEAD代码中。
- scss-loader：自动将scss转换为CSS
- less-loader：自动将less转换为CSS
插件
而webpack由于内置的函数和类特别多，因此插件对外开放的接口里以钩子hook的形式展开。
插件向第三方开发者提供了 webpack 引擎中完整的能力。使用阶段式的构建回调，开发者可以引入它们自己的行为到 webpack 构建流程中。创建插件比创建 loader 更加高级，因为你将需要理解一些 webpack 底层的内部特性来做相应的钩子。
如果需要编写webpack插件，则可以参照官方的文档给出的
www.webpackjs.com/contribute/…
深入便携插件。
写在后面
其实整个课程的内容十分之多，知识点也十分丰富。（因为笔者要去重构小程序，写下这一篇水文，泛泛而谈，觉得有点愧疚，之后会回来多加补充和深度学习。
