什么是Webpack

2017-07-17 18:23:18
admin
2575
最后编辑:admin 于 2018-02-14 16:02:23



先来说一下 webpack 是什么。

webpack 的官方对它是这样定义的:

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

中文的大概意思是说:

webpack 可以看做是模块打包机:它做的事情是,分析你的项目结构,找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript 等),并将其转换和打包为合适的格式供浏览器使用。

用大白话可以这样说:

webpack是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源(图片、js 文件、css 文件等)都看成模块,通过 loader(加载器)和 plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。

如果这样还不明白的话,我们来说下前因后果。

在当今的社会,作为 web 开发,会越来越意识到前端的重要性,随着 HTML5、 CSS3、 ES6 各种技术的发展,前端的开发越来越宠大。甚至有些应用就是单页面应用(SPA),纯 JavaScript 开发,JavaScript 文件的管理也是一个问题。JavaScript 模块化编程,已经成为一个迫切的需求,这就出现了 JavaScript 的模块解决方案,以前是用 requirejs  seajs,而现在则是用 webpack。

举个例子,很多人开发了各种优秀的 JavaScript 模块或组件,我们不想重复发明轮子,而是想直接利用别人的模块,就是类似 require  include 这样的机制,把别人的模块引入进来,但是 JavaScript 又没有 类或包 这样的概念,那应该如何做呢?

如何去引入别人的模块?引入之后保证各种依赖关系不出错?这就是 webpack 要解决的问题。

模块化的概念我们理解了,那如何理解 打包 这个词呢?

其实,模块化的问题解决之后,webpack 就能把各种资源模块打包合并成一个文件输出给浏览器。在打包的过程中还能对这些资源进行处理,比如压缩减少体积,把 sass 编译成 css, coffee 编译成 js。所以它在某些程度上,跟 grunt/gulp 的功能有些相同。至于与 grunt/gulp 的不同之处,我们下面会讲到。



Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

本章节基于 Webpack3.0 测试通过。

从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

    • 在线客服
    • 关注微信
    • 联系电话
      • 欢迎咨询
      • 欢迎加入QQ群 303257430
    • 公众号:源宝网络
      • 联系电话及微信号 18902328227