这是我参与「第四届青训营」笔记创作活动的的第11天，学习总结 Webpack，理解前端工程化的概念和Webpack中的重点知识。

为什么要学习 Webpack

Webpack 是前端“工程化”中的一个重要环节，可以帮助我们理解前端“工程化”概念、工具、目标。

远古时期

前端的项目由图片，样式，字体，js还有各种静态资源文件组成，所有的这些资源都需要我们手动管理。整个过程不仅繁琐，而且还需要考虑文件之间的依赖顺序，对开发效率的影响非常大。
因此，逐渐出现了很多的工程化工具比如，Gulp，require.js

什么是 Webpack

Webpack 本质上是一种前端资源编译、打包工具。将多份资源文件打包成一个 Bundle ，减少文件引入的数量，提高性能。

使用Webpack

1.初始化项目安装依赖

npm init -y 
npm i -D webpack webpack-cli

2.配置文件
指定项目入口和出口等 3.执行编译命令

npx webpack

4.得到最终生成的文件

核心流程

1.入口处理 从配置文件中指定的entry文件开始，启动编译流程。 2.依赖解析执行entry文件，工具require or import 等引入资源语句找到依赖资源
3.资源解析根据module中的配置，调用相关的资源转移器，将png、css等非标准js资源转为js内容。遇到引入资源则回到第2步递归执行。
4.资源合并打包 将转译后的资源内容合并打包为可直接在浏览器运行的 JS 文件。

优点

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

理解 Loader

因为 Webpack只认识Js，所以设计出Loader处理非标准 JS 资源，用于将资源翻译为标准等 JS。

使用Loader

test设置匹配的文件规则，use表示使用的loader，实际利用loader解析的顺序是与use数组的顺序相反的。
比如这里对于less的处理用到了3个loader。

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

各loader之间通过链式调用将处理后的结果传给下一个loader，最终得到需要的标准 JS 代码。

如何编写一个loader

根据前面的使用，loader其实就是一个很简单的函数，我们首先需要接收传入的原始代码，做一些相应的处理，然后返回处理后的代码即可

参考链接如何编写loader

理解插件

因为 Webpack 的代码量巨大，所以对于参与开源的人员来说会有很高的成本，不利于发展。 插件架构精髓：对扩展开发，对修改封闭。

使用插件

1.安装依赖

npm i -D webpack-dashboard

2.导入插件

const DashboardPlugin = require("webpack-dashboard/plugin");

3.创建插件实例 创建实例时，也可以设置一些参数。

Webpack知识体系 | 青训营笔记