课程内容简介.md

1.前端必不可少的脚手架

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

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

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

2.课程内容

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

• webpack的核心概念

  在本章节，我会首先通过一个依赖图谱的例子来展开，详细的论述webpack的loader,plugin,entry,output等核心概念。结合webpack2官网的说明以及日常开发实践经验进行深入的分析。我会使用完整的实例让你对webpack核心概念有深入的理解，什么是chunk？什么是common chunk?什么是hotUpdated chunk?externals ?libraryTarget?library等一系列疑问在本章节我都会给你答案。

• webpack基本使用

  本章节从webpack的基本使用出发，但是又不止于基本使用。我会结合7个实例代码来深入的分析webpack与CommonChunkPlugin结合后的打包实践与原理。同时对于CommonChunkPlugin的各种配置都会使用具体的实例来深入讲解。通过本章节的学习，你不仅会使用webpack，而且会知道如何更好的使用webpack。

• webpack-dev-server核心概念

  本章节会深入分析与webpack-dev-server相关的概念，比如proxy代理,HMR原理,contentBase,publicPath,lazyload,filename等诸多配置的详细讲解。通过深入的了解这部分内容，不仅可以了解优化的点，同时也能更好的解决真实项目开发中可能遇到的问题。

• webpack-dev-server基本使用

  本章节主要教你如何在项目中使用webpack-dev-server，并深入的分析了webpack-dev-server的iframe模式与inline模式的区别。网上关于两者的区别大都来自于官网的翻译，在本章节，我会结合具体的实例来进行分析。

• webpack的HMR原理分析

  结合webpack-dev-server来深入分析webpack实现HMR的原理。在本章节中，我不仅会告诉你webpack实现HMR的原理，同时也会告诉你如何让你写出支持HMR的代码，从而可以让你深入的了解HMR。这其中会包含你常见的:decline函数,accept函数,dispose函数,status函数，apply等函数分析，同时也会详细的告诉你webpack与HMR的相关的配置信息。使得你可以在以后使用webpack的时候得心应手。

• webpack中的compiler和compilation对象

  compilation和compiler对象是写webpack插件的核心内容，在本章节，我不仅会详细讲述两者的作用以及如何在插件中使用它们，同时我也会告诉你在webpack插件书写中你经常使用到的方法或者属性。通过本章节，你不仅能了解什么是模块，什么是依赖模块，什么是chunk，什么是资源等等，你也能知道如何根据具体场景来使用这些资源。

• webpack常见插件原理分析

  在本章节，我会将关注点放在webpack的两个插件的原理上。包括CommonChunkPlugin和PrepackWebpackPlugin，通过这两个插件来加深你对上面知识的理解。从而为下文写一个自己的webpack插件听提供必要的知识。

• 教你写一个webpack插件

  webpack插件是扩展webpack基础功能的主要渠道，在本章节，我会教你如何写一个webpack插件。

• 教你写一个webpack的loader

  在本章节，我会使用一个markdown文件处理的loader来教你如何�写webpack的loader。

• webpack结合react-router实现按需加载

  在上面的章节中，我讲到了如何使用require.ensure来动态产生独立的chunk的问题，在本章节我会使用react-router的例子来讲解如何使用webpack的这种特性。通过动态按需加载的特性能够减少你页面首次加载的时长，配合单页面应用绝对是页面优化的首选。

• webpack2的tree-shaking深入分析

  tree-shaking是webpack2引入的新的特性，本章节我会详细描述如何使用tree-shaking以及tree-shaking的原理和适用范围。本章节内容会包含具体的实例，所以你一定能够很好的了解这种新特性。

• 以node方式集成webpack和webpack-dev-server打包

  在本章节，我将使用一个很好的例子来教你如何基于webpack,webpack-dev-server来写一个自己的打包工具并适应具体的业务场景。通过本章节的内容，你将能很好的将上面章节的内容做一个串联，同时也能更好的理解webpack。

3.写给读者

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