Webpack 笔记

Webpack的作者：Tobias Koppers

诞生的起源

webpack 是为了实现code splitting，帮助大型 web 应用提升性能。

本质

Webpack 本质是模块打包程序，只识别javaScript 语言。在开发一个应用的时会用到各种各样的第三方模块，通过 Webpack 可以将这些模块抽离到一起形成一个模块。但是当项目特别巨大的时候，如果只要一个包那么首次加载的时候肯定很慢，所以可以利用 Webpack 进行代码拆分，实现 web 项目的按需加载。对于多页面入口来说，一个入口就生成一个模块，对于单页面来说，可以对路由进行懒加载操作，实现一个路由打包成一个模块。

什么是 Webpack 模块

有外部依赖关系的，对 webpack 来说都是模块，如：

• ES2015 import 语句
• CommonJS require() 语句
• AMD define 和 require 语句
• css/sass/less 文件中的 @import 语句。
• 样式(url(...))或 HTML 文件(img src=...)中的图片链接(image url)

四个核心概念

• entry：让 Webpack知道从哪里开始来构建其内部依赖图。
• output：输出打包出来的文件的位置。
• loader：将非 JavaScript 文件的模块编译成webpack 能够有效处理的模块。
• plugins：做一些范围更广的任务，如压缩代码、抽离 CSS 文件、HTML 文件等。

webpack 模块路径解析规则

Webpack 使用 enhanced-resolve 来解析文件路径，resolver 帮助 webpack 找到 bundle 中需要引入的模块代码。

引入绝对路径时，不需要额外解析

相对路径解析

import "../src/file1";
import "./file2";

1. 查找相对当前模块的路径下是否有对应文件或文件夹
2. 如果是文件，且路径具有文件扩展名，则被直接将文件打包
3. 否则，将使用 resolve.extensions 选项作为文件扩展名来解析
4. 如果是文件夹找 package.json 的 main字段
5. 没有 main 字段就找 index.js
6. 如果都没找到，解析失败

模块路径

import "module";
import "module/lib/file";

1. 模块目录解析时将在 resolve.modules 中指定的所有目录内搜索。resolve.alias 可以用来替换路径
2. 如诺未指定，查找当前文件目录下，父级目录及以上目录下的 node_modules 文件夹
3. 检查路径是否指向文件或目录
4. 如果路径指向一个文件，且路径具有文件扩展名，则被直接将文件打包
5. 否则，将使用 resolve.extensions 选项作为文件扩展名来解析
6. 如果路径指向一个文件夹，且包含 package.json 文件，则按照顺序查找 resolve.mainFields 配置选项中指定的字段
7. 如果 package.json 文件不存在或者 package.json 文件中的 main 字段没有返回一个有效路径，则按照顺序查找 resolve.mainFiles 配置选项中指定的文件名

Manifest 是什么？

Webpack 打包编译后的代码，import 或者 require 会转化为 __webpack_require__

manifest包含了runtime候的基础公共依赖。在浏览器运行时，Webpack用来连接模块化的应用程序的所有代码。runtime 在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。