Webpack,请开始你的表演(一)

这是一篇 Webpack 入门文章,之所以写这篇文章,原因有二:

工作和学习中一直在用,但是总有一些内容理解的不够;

自己目前检索到的有关 Webpack 的文章,不能让我对该打包工具有个清晰的认知.

我主要的参考来源是 Webpack 3.10.0 版本的文档。

本文假设读者拥有 Javascript 基础,已有大概了解或者使用过 Webpack,并想深入学习 Webpack。

对于学习任何新的工具,会用总是简单的,毕竟网络上有诸多的示例或者开源,但是当想要深入学习的时候,基础是每个人都绕不开的。

接下来,讲述的是Webpack的基本概念,虽然并不能让你立即写出优美而有效的 Webpack 配置文件,但是对你更好的学习无疑是非常有帮助的。

module & dependency graph

由图可知,对于 Webpack 来说,一切皆模块。

相对于模块化编程中的 Javascript 模块,Webpack 扩展了模块的概念,将Javascript (包括可转化为 Javascript 的 TypeScript 等资源)、CSS (包括可转化为 CSS 的 Less/Sass 等资源)、图片以及字体资源等统统当作模块。

具体来说,通过以下声明方式引入的资源均被视为 Webpack 模块:

ES2015import

Commonjsrequire

AMDdefine & require

CSS/Less/Sass 文件中使用的@import

HTML 和样式文件中的url

打包的过程即从设置的入口(后面会讲到)开始,以模块为基础建立一个依赖树,以生成少数甚至一个打包文件为结束。

entry/output

Webpack 可以说是一个黑盒子,输入源代码,输出打包文件,所以必定有起点和终点,起点可以有多个,但是终点只有一个。

loader

在 module 中提到过,Webpack 不仅仅可以处理 javacript 文件,也可以处理其他类型的资源文件,这个时候用到的就是 loader。简单来说,Webpack 只可以运行处理 Javacript,其他类型的文件需要通过 loader 转化成 Javascript 模块。

plugin

刚开始使用 Webpack 时,很容易对 loader 和 plugin 之间的区别有疑惑。其实很简单,只需注意一点:loader 只在加载文件的时候可以用得上,plugin 可以在 Webpack 执行过程中任何有需要的地方使用。

Webpack 的强大来源于众多的配置项目,而所有功能的实现,配置的书写都建立在以上概念的基础之上,所以理解好以上概念,学习起来事半功倍。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171210G0IDSW00?refer=cp_1026

扫码关注云+社区