Webpack 定义解析 | 青训营笔记

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

一、本节课重点内容

本节课将重点围绕「构建 Webpack 知识体系」这一核心话题展开。

在我们正式学习 Webpack 之前，本节课将解读为什么需要学习 Webpack ，Webpack 的本质是什么以及 Webpack 技术优势等相关知识，为我们学习后续相关内容做准备。

课程重点内容归纳总结如下所示：

1. Webpack 的本质
2. Webpack 定义解析
3. Webpack 优势

二、详细知识点介绍

为什么要学习Webpack?

理解前端

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

课程内容主要总结:

• 什么是Webpack
• Webpack打包核心流程

1. 示例
2. Entry => Dependencies L _ookup => Transform => Bundle => Output
3. 关键配置项介绍

• Loader组件
• Plugin组件
• 如何学习Webpack

1. 入门级:学会灵活应用
2. 进阶:学会扩展Webpack
3. 大师:源码级理解Webpack打包编译原理

前端页面是由代码及其相关的资源文件组成的。 页面通常是需要在页面里面进行资源管理的，我们可以对其进行手动化的管理方式，但是：

过于依赖手工，管理就会变得很艰难。比如有50个JS文件，我们的管理操作就会过程繁琐，当代码文件间有依赖的时候，就得严格按依赖顺序书写开发与生产环境一致，难以接入TS或JS新特性。

比较难接入L ess、Sass等工具JS、图片、CSS资源管理模型不一致，这些都是旧时代非常突出的问题，对开发效率影响非常大，直到前端管理工具的出现，改善了这样的局面。

大大的优化了现有的资源管理操作。

什么是Webpack？ 它本质上是一种前端资源编译、打包工具，为了优化当下我们前端资源管理繁琐而逐渐的衍生出来的实用性管理工具。

webpack的优势：

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

三、总结

webpack的核心功能就是打包，打包的是前端所设置的各个模块，这样的打包既保留了单个模块的可维护性，减少了页面负荷，加快了页面缓冲加载时间，优化了前端交互体验。