d1n910 / learnwebapck

学习 Webapck实战 入门、进阶与调优

learnWebapck

学习 Webapck实战 入门、进阶与调优

第一章 Webapck 简介

• 何为 Webapck
• 使用 Webapck 的意义
• 安装 Webapck
• 如何开始一个 Webpack 工程

1.1 何为 Webapck

Webpack 是一个开源的 Javascript 模块打包工具，其最核心的功能是解决模块之间的以来，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个 JS 文件（有时会有多个，这里讨论的只是最基本的情况）。这个过程就叫作模块打包。

1.2 什么需要 Webpack

1.2.1 何为模块

模块：工程中引入一个日期处理的 npm 包，或者便携一个提供工具方法的 JS 文件，这些都可以成为模块。

模块化**：按照特定的功能将其拆分为多个代码段，每个代码段实现一个特定的目的，可以对其进行独立的设计、开发和测试，最终通过接口来将它们组合在一起。

1.2.2 JavaScript 中的模块

在大多数程序语言中（如C、C ++、Java），开发者都可以直接使用模块化进行开发。工程中的各个模块在经过编译、链接等过程后会被整合成单一的可执行文件并交由系统运行。

JavaScript 过去没有模块这种概念，只能通过 Script 标签将它们一个个插入页面中，

JavaScript 没有模块化的原因：Javascript 之父 Brendan Eich 最初设计这门语言比较简单，用来处理的事情不多，所以没上模块。

引入多个 script 文件到页面中的问题：

（1）需要手动维护 JavaScript 的加载顺序。页面多个 script 之间通常会有依赖关系，但是这种依赖关系是隐式的，除了添加注释以外很难清晰地指明谁依赖了谁，这样当页面中加载的文件过多的时候就会出现问题。

（2）每一个 script 标签就意味着向服务器发起一次静态资源请求，在 HTTP 2 还没出现的时期，建立连接的成本是很高的，过多的请求会严重拖慢网页的渲染速度。

（3）在每个 script 标签中，顶层作用域即全局作用域，如果没有任何处理而直接在代码中进行变量或函数声明，就会造成全局作用域的污染。

模块化：

（1）通过导入和导出语句我们可以清晰地看到模块间的依赖关系

（2）模块可以借助工具来进行打包，在页面中只需要加载合并后的资源文件，减少了网络开销。

（3）多个模块之间的作用域是隔离的，彼此不会有命名冲突。

ES6 正式定义了 Javascript 的模块标准，使得终于拥有了模块这一概念。