对于打包工具的熟悉程度渐渐地也已经成为衡量前端开发工程师水平的一个重要指标。记得在校招面试的时候就有问各种打包工具的问题，如对于 Gulp、Grunt、Webpack 的熟悉程度，各种打包工具的特点及优缺点等。而当我们逐渐融入到一个特定的团队中，一般都有现成的脚手架提供给我们使用，而对于脚手架本身的关注程度也会慢慢降低。那是否就意味着，不需要掌握脚手架的相关知识了呢？其实不然，有以下几个理由。

（1）任何脚手架都有一定的适用场景，但是同时也有边界，如果不小心跨域了这个边界，那么很可能遇到意想不到的问题，如 bug。此时，如果对脚手架的原理有一定的了解，那么也能够更快的定位问题。

（2）任何一个脚手架都不可能是完美的，都会存在一个优化的阶段，如果只是用它，而不去了解它、优化它，那么本身就是一个追求完美的工程师不应该具有的态度。况且，对于工程师来说，只是会用而不知道其原理本身就是一个笑话。

课程内容

本课程是基于对 Webpack 有一定的了解，或者是想深入了解 Webpack 打包原理的读者而写的。如果只是想了解如何使用 Webpack，那么网上的大部分资料已经足够了。现在对本课程做一个概括，主要内容包含以下部分。

  • Webpack 的核心概念
  • Webpack 基本使用
  • webpack-dev-server 核心概念
  • webpack-dev-server 基本使用
  • Webpack 的 HMR 原理分析
  • Webpack 中的 Compiler 和 Compilation 对象
  • Webpack 常见插件原理分析
  • 写一个 Webpack 插件
  • 写一个 Webpack 的 loader
  • Webpack 结合 react-router 实现按需加载
  • Webpack 2 的 Tree-shaking 深入分析
  • 以 Node 方式集成 Webpack 和 webpack-dev-server 打包

写给读者

其实现在基于 Webpack 的打包工具都已经非常成熟，所以读者可以随意的在 Github 或者 npm 中找到需要的脚手架。但是，就像文章开头所说，只有了解了 Webpack 的核心原理，才能在开发中做到得心应手。我见过很多同学，能够正常的使用 Webpack，对很多 Webpack 的配置也了解，但是当遇到问题的时候往往不知所措。通过本系列课程，会让读者摆脱现状，更好的理解 Webpack 原理，而不会知其然不知其所以然。

单击这里详见课程信息。

另外，招募作者来写小课。GitChat是一个移动端的IT知识、技术分享平台，于2017.10和CSDN合并，成为其旗下独立品牌。我们正在寻求有互联网基因的人来一起分享IT人员的关切，诚挚邀请您来做一次分享（让IT类文章变现，增加关注度、提高知名度），欢迎有志者加入~cuicui@gitbook.cn