webpack-是什么

83次阅读

共计 1391 个字符,预计需要花费 4 分钟才能阅读完成。

从前的代码书写方式

在 html 文件里使用 script 标签引入各个 JavaScript 文件。

<!-- index.html -->
<html>
  <body>
    <script src="./header.js"></script>
    <script src="./content.js"></script>
    <script src="./footer.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
// index.js
new Header()
new Content()
new Footer()

存在的问题:

  1. 引入多个 Javascript 文件,多次发送 HTTP 请求;
  2. 在 index.js 中的代码中不能看出各个构造函数到底是在哪个文件中定义的。比如,需要查看 index.html 的代码,才能知道原来 Header 构造函数是在 ./header.js 文件中定义的;
  3. script 标签的书写顺序不正确会导致代码无法正确运行,不易发现问题所在,较难维护。

后来的代码书写方式

<!-- index.html -->
<html>
  <body>
    <script src="./index.js"></script>
  </body>
</html>
// index.js
import Header from './header.js'
import Content from './content.js'
import Footer from './footer.js'

new Header()
new Content()
new Footer()

使用 ES6 模块语法,解决了上面提到的问题,但是,浏览器是不支持 import 语法的。

使用 webpack

所以,在这个时候就可以使用 webpack 来将 import 语法翻译成浏览器支持的语法,但是注意不能将 webpack 完全理解为一个语法翻译工具,因为 webpack 只支持翻译模块语法,不支持翻译其他的高级语法。

接下来,安装 webpack、webpack-cli,执行 npx webpack index.js,执行结束后会生成一个 dist 目录,里面包含一个 main.js 文件。

在这个例子中,webpack 做的东西是把 index.js 中用 import 语法引入的 Header、Content 和 Footer 模块合并打包在一起并生成了 main.js 文件,最后在 index.html 文件中引入这个文件即可:

<!-- index.html -->
<html>
  <body>
    <script src="./dist/main.js"></script>
  </body>
</html>

并且,webpack 同时能识别 CommonJS、CMD 和 AMD 的模块规范,例如,这样书写也是可行的:

// index.js
const Header = require('./header.js')
const Content = require('./content.js')
const Footer = require('./footer.js')

总结

(官网原文)本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后 将所有这些模块打包成一个或多个 bundle

正文完
 0

Webpack是什么

83次阅读

共计 871 个字符,预计需要花费 3 分钟才能阅读完成。

背景

webpack 的作者是德国纽伦堡Tobias Koppers,   webpack 的诞生之初主要是想解决代码的拆分问题。这也是 webpack 这么受欢迎的原因所在。同时也离不开 500 多位开源贡献者。

解释

webpack 是一个现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 _bundle_。

这是官方文档给出的 webpack 的解释,这里我提取几个关键词理解。

理解模块

模块, 又称构件, 是能够单独命名并独立地完成一定功能的程序语句的集合(即程序代码和数据结构的集合体)。它具有两个基本的特征:外部特征和内部特征。外部特征是指模块跟外部环境联系的接口(即其他模块或程序调用该模块的方式,包括有输入输出参数、引用的全局变量)和模块的功能;内部特征是指模块的内部环境具有的特点(即该模块的局部数据和程序代码)。

以上是百度百科给模块的定义,前端模块化一般指 javascript 的模块,最常见的模块就是 npm 包。每一个模块可能是最小甚至是最优的代码组合。

静态模块打包工具

将 javascript 代码、与其他静态文件组成的不同模块,进行分析、解析压缩打包成浏览器可识别的代码的过程。

依赖图(dependency graph)

任何时候,一个文件依赖于另一个文件,webpack 就把此视为文件之间有_ 依赖关系_。webpack 从命令行或配置文件定义的一个模块列表开始,处理你的应用程序;从入口开始 webpack 递归的构建一个依赖图,这个依赖图包含着应用程序中所需的每个模块,然后将这些模块打包成少量的 bubdle, 使浏览器可以执行。

通过上图能够简单理解,webpack 就像一个黑盒子,通过这个黑盒子的模块(js、ts、png、sass 等),将最终转化成浏览器可识别的文件。

Webpack 能做什么?

代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布

参考:
百度百科模块定义
官网给出的模块解释
官网依赖图解释

正文完
 0