少年，看你骨骼惊奇，Webpack手册奉上！

前言

我是三水清，曾就职于新浪微博和腾讯，目前在某厂做前端架构工作，主要负责团队的前端工程化技术建设和工具链打造。

作为一个十年的前端老司机，我经历了前端从刀工火种到现在百花齐放的各个阶段，我自己从一个互联网小白成长为能够独当一面的架构师，在这个过程中，我接触到了很多前端开发和调试技术，对前端工程化的重要性有切身的感受，自己也努力打造更加适合团队的前端工具链，希望以此来提升整个团队的研发效率。

随着Web前端的不断发展，传统网页开发在逐渐往Web应用（Web Application）的开发方式转变，页面开始变得越来越复杂，复杂的应用场景必然引起技术的进步，于是会出现新的技术手段来解决现有问题。随着前些年大行其道的Grunt、Gulp、FIS等打包工具的发展，带动了一波前端工程化热，又随着React、Vue库这些年的扩张，大型WebAPP不再局限于手写jQuery来操作DOM，ES6规范的普及也让模块化开发有了新的体验。在这个过程中， Web前端逐渐发展成了模块化和单页应用（single-page application，简称SPA）为主的形式，在SPA 形态、ES6发展和React、Vue这些库的发展普及大背景下，Webpack越来越被应用到前端项目中，现在 Webpack已经成为主流构建工具。

很多同学对 Webpack 和工程化都接触不多，知道 Webpack 的也仅仅是把它当做一个打包工具来使用，但是随着项目和团队的发展，越来越多的问题摆在我们的面前：

Ø 在模块化开发中，模块多了，模块间的依赖管理究竟应该怎么做呢？不同规范间的模块怎么相互依赖？

Ø 页面复杂度提升之后，多页面、多系统、多状态如何管理？页面间的公共代码应该如何维护？

Ø 项目代码库多了之后，那些已经被证明是最佳实践的解决方案，如何在多项目中快速迁移使用？

Ø 团队扩大之后，团队协作怎么做？怎么解决多人研发中的性能、代码风格等问题？

Ø 如何权衡研发效率和产品需求迭代之间的问题？

这些问题虽然不是Webpack直接可以解决的问题，但是我们完全可以围绕Webpack打造一个前端工程化解决方案来解决这些问题。很多人说会了Webpack你就变成「配置工程师」了，其实不然，这句话取决于你的眼界高度。如果我们只是看到了一个JavaScript的模块化打包工具，那么我们可以满足前端开发的「温饱问题」，如果我们深入了解了Webpack内核机制，并且能够利用其强大的插件系统来解决项目问题，我们就可以实现前端开发中的「小康」。

所以这些年来，我从 Grunt、Gulp 到 FIS，再到 Webpack，我带领团队做了很多工程化的尝试，在这个过程中我沉淀了大量的Webpack知识和最佳实践，我喜欢将这些知识以总结和写作的方式让更多人收益，同时总结和写作这种输出也是我学习的一种方式。

所以我在慕课开设了《Webpack从零入门到工程化实战》专栏。这个专栏不仅可以让你学到知识，而且我更希望可以作为一个Webpack的操作手册，在你需要的时候随时可查。

点击下方图片或长按扫码均可订阅 ↓↓↓

不管你是刚入前端的「菜鸟」还是想在团队内工程化建设有所作为，这个专栏都会对你有很大的帮助。前端技术日新月异，而学习最好的方式是输出，当我写专栏的同时，我也是在自己总结和进步，我希望大家和我一起参与这个过程。我会随时关注业内动态，有新的 Webpack动向就会不定期补充新的内容。所以我希望我的专栏内容在一段时间内能够始终适用，专栏内部思考问题的方式和工程化思维能够始终帮助大家应对技术的变化。

介绍

专栏分为三大部分和六大模块。

按照学习知识循序渐进和解决日常开发的环节来划分为三个大部分，分别为：

Webpack开发配置：学习一个新的知识点，一定要搞明白是什么、为什么、可以做什么，学习了这一部分算是Webpack入门了，日常开发配置都没问题。

Webpack内核原理：理解了这部分你就可以理解 Webpack的流程机制，不再是一个简单的「配置工程师」了，还可以帮助团队做一些源码级别的改造和探索。

工程化实践：这部分的内容将会具有很强的实操性，有些实战可以直接在项目中使用。这一部分学完并且能够融会贯通，恭喜你，你可以借助Webpack打造自己的前端工程化解决方案了！

六大模块，详细课程主要内容：

入门篇

介绍Webpack的基本概念和解决的问题，从零搭建Webpack构建环境，带领大家体验 Webpack-CLI的零配置打包，介绍Webpack的核心概念和基础配置。

配置篇

从模块化开发、Babel、React/Vue配置、TypeScript配置、CSS样式相关配置和静态资源管理，到Dev Serve环境配置，带领大家搭建基础开发环境。

优化篇

在优化篇，会针对生产环境的优化手段，从静态资源体积、缓存管理和Webpack打包速度优化进行深入讲解，并且对Webpack的代码拆分（SplitChunk）和Tree-Shaking代码级别的实践讲解。

原理篇

介绍Webpack的核心机制实现，学习Webpack的核心模块Tapable的实现和用法，更加深入的理解Webpack的工作流程，理解Webpack的Compiler和Compilation两个对象。

实战篇

学习完Webpack的基础知识和内核原理，和大家一起动手从工程化和项目实战角度，通过解决项目中的实际问题，来体验Webpack的强大功能。

总结篇

本章节内容偏总结和手册功能，只要内容包括课程总结、讲解Webpack 5.0的新技术和常用Loader、Plugin插件列表。

骚年，我看你是万中无一的开发人才，维护编程世界和平，就靠你了，这本秘籍给你走个内部价，祝你早日凯旋归来！

>>戳此订阅<<