Webpack 简介

Webpack是什么?

Webpack是一个模块打包工具(module bundler),因为平常多用来对前端工程打包,所以也是一个前端构建工具。其最主要的功能就是模块打包,官方对这个打包过程的描述不太容易理解。

模块打包,通俗地说就是:找出模块之间的依赖关系,按照一定的规则把这些模块组织合并为一个JavaScript文件。

Webpack认为一切都是模块,JS文件、CSS文件、jpg/png图片等等都是模块。Webpack会把所有的这些模块都合并为一个JS文件,这是它最本质的工作。当然,我们可能并不想要它把这些合并成一个JS文件,这个时候我们可以通过一些规则或工具来改变它。

Webpack 简介
Webpack官网示意图,从一个js文件开始构建,打包成一个js文件,最后又拆分出需要的4种文件

在入门章节,我们主要学习它最本质的工作。在后续章节,我们学习一些规则和工具来改变或扩展它的本质工作。

注:

1.官方的描述:At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles;

2.打包工具与构建工具有什么不同?对于前端工程,可以认为是一个意思,本教程里不做学术区分;

3.你可能听过Grunt和Gulp这两个构建工具,也看过它们与Webpack的区别,但是无法真正理解。其实看再多遍对它们区别的描述,都不如亲自使用几次来感受。下一节,尝试使用一下吧,你会有更好的理解的;

笔记与思考

  1. 今年刚入行,看文档实在费劲,更别提源码了,还好看到了你的博客有写这东西,点赞!

发表评论

邮箱地址不会被公开。 必填项已用*标注