webpack都有哪些（作为前端你真的会用webpack么）

目前为止，webpack 在 GitHub 上已拥有 48.8k 的 star，在前端代码打包器领域内，算得上是 时下最流行的前端打包工具。它可以分析各个模块的依赖关系，最终打包成我们常见的静态文件：.js 、 .css 、 .jpg 、.png，极大地提升了开发至发布过程的效率。

所以，不少人称它为：模块打包机

webpack 工作流程图

可是，不少前端人，对于 webpack 的使用和了解只停留在了 20% 的基础功能上，一方面是因为大家觉得对 webpack “浅尝辄止”即可，另一方面是因为 webpack 难上手：

1. 有着众多新概念。 比如 entry、output、mode、loaders 和 Plugins、热更新、Code Spliting、Tree-Shaking 等等，就能让初学者望而生畏。

2. 过重的插件体系。 插件体系是 webpack 的核心，可以说，webpack 的生态就是建立在众多插件之上的。但一个简单的构建项目，可能就需要 14 个插件：7 个第三方插件 7 个 webpack 内置插件。按照平均一个插件含有 2-3 个配置项（这已经是往低了算了）来计算，14 个插件就有 30 多项配置。

不过，作为一个老前端人，我特别想嘱咐大家一句：不管你是使用 React、Angular.js 还是 Vue，深入掌握 webpack 的使用及原理，收获绝对会超过你的想象：

• 首先，webpack 可以极大提升你的工作效率，扩阔你的前端技术栈。
• 其次，webpack 十分有利于你去做跨端开发，比如小程序、Weex、React Native、Electron 等框架的打包。

而且，由于前端工程化越来越受重视，不少大厂在面试前端时，webpack 相关知识点是必考项。比如下面这些面试题，看看你能不能给出让面试官满意的回答。

• 有哪些常见的 loader？他们能解决什么问题？
• webpack 的构建流程是什么? 从读取配置到输出文件的整个过程
• 是否写过 loader 和 Plugin ？描述一下编写 loader 或 Plugin 的思路？
• webpack 的热更新是如何做到的？说明其原理？
• 如何利用 webpack 来优化前端性能？（提高性能和体验）

所以当极客时间的编辑找到我，想让我开一门工具课时，我很乐意当一个贡献者，把我对 webpack 的理解与运用分享出来。

我认为系统掌握 webpack，是有一定学习路线的。比如在掌握 webpack 打包的速度、体积，及页面加载时的性能优化之前，你需要先搞懂 webpack 内部的运行原理和插件机制。这样，你才能理解并彻底掌握后面的知识点。

于是，就有了极客时间新上线的视频课程 《玩转 webpack》，这门课是基于最新的 webpack 4 来设计，覆盖 webpack 入门、配置、实战、优化、原理等方方面面的内容。我会循序渐进地带你从工程化角度，全方位掌握 webpack 的核心技能和优化策略。

无论你是对 webpack 一无所知的初学者，还是经验丰富的前端工程师，都能够通过这个课程，提升对 webpack 的理解，并在 Web 开发中更高效地运用 webpack。