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

本文来自企鹅号 - 九号媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

开发 | 小程序「分享图」生成难?一招教你轻松解决

许多小程序,都提供了「分享图」功能。利用它,用户可以生成特制的分享图片,并分享到朋友圈。

1806
来自专栏听雨堂

span不如div的地方

页面中产生格式化的效果,我一般比较喜欢用span,因为其本身就是inline的,但是,在进行精细控制时就不行了,比如我想要这个效果,每行由三个部分构成:时间,柱...

2189
来自专栏python小白到大牛

动漫迷的福利!Python小白也可以学会的爬虫教程

有一段没用 python 了,我也不知道自己为什么对 python 越来越淡,可能自己还是比较喜欢 android ,毕竟自己第一次接触编程就是 android...

1372
来自专栏魏艾斯博客www.vpsss.net

屏幕 GIF 动态图捕获软件及录制过程

作为站长有时候需要录制屏幕 GIF 动态图片,就得现学现卖。这不魏艾斯博客在使用遨游浏览器的过程中遇到一些 bug 需要提交给官方,遨游技术员希望老魏提供一段正...

2402
来自专栏维C果糖

设置 IntelliJ IDEA 主题和字体的方法

1 前言 在博文「IntelliJ IDEA 之 HelloWorld 项目创建及相关配置文件介绍」中,我们已经用 IntelliJ IDEA 创建了第一个 J...

95610
来自专栏谦谦君子修罗刀

程序员面试闪充 -- 性能优化

CPU 和GPU 关于绘图和动画有两种处理方式CPU(中央处理器)和GPU(图形处理器),CPU的工作都在软件层面,而GPU的在硬件层面。 总的来说,可以使用...

39213
来自专栏数据小魔方

如何在Excel里加载第三方插件,让你的Excel功能更加强大!!!

今天是小魔方的第三篇推送教程,要谈的话题是如何在Excel里加载第三方插件工具! 记得第一期的时候讲的如何调用开发工具,其实微软公司在开发office办公套件的...

4975
来自专栏木子昭的博客

Python综合Web案例_在线为头像添加装饰第二步:上传头像, 并实时裁剪第三步: 生成图片,长按保存

前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程 前端: BootStrap, Jquery, Jcro...

3296
来自专栏拂晓风起

createjs入门

1813
来自专栏章鱼的慢慢技术路

使用Photoshop实现弹簧字效果

1544

扫码关注云+社区

领取腾讯云代金券