# webpack导言

# 为什么要深入掌握webpack？

由于近年来手机、移动平板等移动设备的快速普及。Web前端的开发从传统的 PC网页开发发展到多终端的开发，所以不仅需要兼容PC、H5等各类不同分辨率 的网页开发。所以，针对不同应用场景做不同的打包就尤为重要。例如针对PC 后台的单页面应用打包，或者对性能和可访问性有要求的H5的构建。

再则，node.js的快速发展，基于npm的第三方依赖包不能直接在浏览器中直接 引入，所以需要借助webpack等构建工具来复用组件。

最后，当前留下的React，Vue和Angular的三大框架的一些语法特点，如JSX， {{}}等不能被浏览器直接解析，需要构建工具进行转换。

所以，借助webpack等构建工具打包尤为重要，再则，webpack在各类打包工具 中体现了优越的构建能力，例如功能强大、配置灵活，及特有的code spliting 等，还有基于loader/plugin丰富的配套工具和生态。所以webpack优越性更大。

# 入手webpack的难点

入手webpack可能对其打包理念：一切皆模块感到困惑，在webpack中，不仅JS 是模块，例如HTML，CSS，图片等皆可为模块。

其次就是webpack强大的插件扩展功能及其配置：entry、output、loaders、plugins 和概念热更新、code spliting等感到迷茫。

最后就是对webpack打包优化，体积优化等的深入。

# 学习webpack的过程

# webpack简介

• 构建发展史

# 基础篇：webpack的基本用法

• webpack的基本用法
• webpack的进阶用法

# 进阶篇：webpack的构建优化

• 编写可维护的webpack构建配置
• webpack构建速度和体积优化

# 原理篇：webpack的打包原理

• 通过源码掌握webpack打包原理

# 编写loader和plugins

• 编写loader和plugins