09 Node.js 与 Webpack 作业
客观题
在线答题： B 站-Node.js 与 Webpack
什么是 Node.js？
- A. 一种前台新的语言
- B. 独立运行 JavaScript 的运行时环境
- C. 一个插件
- D. 一个能执行网页的软件
答案
- 答案是 B. 独立运行 JavaScript 的运行时环境。
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于构建服务器端应用。它使 JavaScript 能够在服务器端运行，实现了在浏览器之外运行 JavaScript 代码的能力。
- Node.js 提供了丰富的库和工具，使开发者能够方便地构建高性能、可伸缩的网络应用程序。与传统的浏览器环境中运行 JavaScript 不同，Node.js 主要用于服务器端开发。
Node.js 运行在哪个引擎之上？
- A. V8
- B. Rhino
- C. SpiderMonkey
- D. JavaScriptCore
答案
- 答案是 A. V8。
- Node.js 运行在 Chrome 浏览器中使用的 V8 引擎之上。V8 是由 Google 开发的高性能 JavaScript 和 WebAssembly 引擎，用于执行 JavaScript 代码。
- Node.js 利用 V8 引擎使 JavaScript 能够在服务器端运行，并通过事件驱动、非阻塞 I/O 模型等特性实现高效的异步编程。
- V8 引擎是一个 C++ 编写的程序，用来执行 JS 代码，也是 Chrome 和 Node 集成的核心，SpiderMonkey 是 Mozilla 项目的一部分，是一个用 C 语言实现的 JavaScript 脚本引擎。
- 另外还有一个叫做 Rhino 的 Java 版 本，JavaScriptCore 是一个 C++ 实现的开源项目。使用 Apple 提供的 JavaScriptCore 框架，你可以在 Objective-C 或者基于 C 的程序中执行 Javascript 代码
Node.js 要执行的 JS 代码中访问其他路径用？
- A. 相对路径
- B. 本地路径
- C. 绝对路径
- D. 网络路径
答案
答案是 C. 绝对路径。
在 Node.js 中，要执行的 JavaScript 代码中访问其他路径时，通常使用的是绝对路径。
绝对路径是相对于文件系统根目录的完整路径，可以准确定位文件的位置。
Node.js 提供了
path模块，其中的resolve方法可以用来将相对路径转换为绝对路径。因为 Node.js 执行代码时，代码里的相对路径都是以终端运行时所在目录为起点出发，查找相对路径，而不是以文件本身出发
jsconst path = require('path'); // 使用相对路径 const relativePath = './myFile.js'; // 转换为绝对路径 const absolutePath = path.resolve(__dirname, relativePath); // __dirname 是 Node.js 中的一个特殊变量，表示当前模块的所在目录 // 通过 path.resolve 方法，可以将相对路径转换为绝对路径，便于在代码中访问其他文件
Node.js 作用不包含哪个？
- A. 应用于前端工程化
- B. 编写网页，操作 DOM 和 BOM
- C. 编写后端接口
- D. 编写 Web 服务
答案
- 答案是 B. 编写网页，操作 DOM 和 BOM。
- Node.js 主要用于服务器端开发，它的作用不包括编写网页、操作 DOM（文档对象模型）和 BOM（浏览器对象模型）。
- Node.js 的主要用途是构建服务器端应用程序，处理网络请求、文件操作、数据库访问等任务。相反，网页开发通常发生在浏览器环境中，使用浏览器的 JavaScript 引擎来执行代码，实现与用户交互、DOM 操作等前端功能。
- Node.js 主要作用，编写后端 Web 服务，返回网页和数据资源，或者作为前端工程化的一种工具，而且没有 BOM 和 DOM
以下哪个不是 URL 组成单元？
- A. 相对路径
- B. 端口号
- C. 资源路径
- D. 查询参数
答案
答案是 A. 相对路径。
在 URL 中，相对路径是一种用于指定资源位置的方式，它相对于当前文档的路径。而 URL 的组成单元主要包括：
- 协议（Protocol）
- 主机（Host）
- 端口号（Port）
- 资源路径（Path）
- 查询参数（Query Parameters）
相对路径通常是在 HTML 或其他文档中使用，用于引用同一网站内的其他资源。在 URL 的标准中，相对路径通常不被视为 URL 的组成单元。
端口号的作用？
- A. 链接服务器的钥匙
- B. 确定服务器在网路中方位
- C. 确定要访问的资源
- D. 区分不同的服务程序
答案
- 答案是 D. 区分不同的服务程序。
- 端口号用于区分同一台计算机上运行的不同服务程序。在计算机网络中，一个 IP 地址可以对应多个服务，通过端口号来标识不同的服务。常见的端口号有一些标准分配，比如 HTTP 服务通常使用端口号 80，HTTPS 使用端口号 443，FTP 使用端口号 21，等等。
- 当客户端发起网络请求时，除了要指定服务器的 IP 地址，还需要指定连接服务器上的具体服务。这时，端口号就派上用场，确保数据包能够正确路由到相应的服务程序。
- 所以，端口号在网络通信中起到了区分不同服务程序的作用。
什么是 Web 服务？
- A. 计算机自带的一个程序
- B. 一段代码程序
- C. 事件监听器
- D. 只能提供 html 的程序
答案
- 答案是 B. 一段代码程序。
- Web 服务通常指的是一段在网络上可以被访问的代码或程序，用于提供特定的功能或服务。这段代码可以是后端服务器上的程序，也可以是通过网络提供某种服务的程序，比如通过 API（Application Programming Interface）暴露的服务。
- Web 服务：一个程序，用于提供网上信息浏览功能（包括但不限于 JSON 字符串数据和网页等资源）
以下哪个端口号是合法的？
- A.
290000 - B.
30.1 - C.
9005 - D.
-80
答案
- 答案是 C.
9005。 - 端口号是一个 16 位的整数，合法的端口号范围是从 0 到 65535 之间的任意整数。因此，
9005是一个合法的端口号。
- A.
服务器返回数据的动作叫？
- A. 响应
- B. 请求
- C. axios
- D. 请求报文
答案
- 答案是 A. 响应。
- 服务器返回数据的动作被称为 "响应"。在客户端发起请求后，服务器会处理请求并返回相应的数据，这个过程就是服务器对客户端请求的响应。
- 响应通常包含一个状态码（如 200 表示成功），响应头（包含一些元信息），以及响应体（包含实际的数据）。
- 服务器返回的动作叫响应，向服务器发送的动作叫请求
什么是模块化？
- A. 一个文件夹就是一个模块
- B. 必须有导出的才叫模块
- C. 每个文件就是一个独立的模块
- D. 被执行的目标 JS 文件不是模块
答案
- 答案是 C. 每个文件就是一个独立的模块。
- 模块化是一种将程序拆分为独立功能块并通过接口进行组合的编程范式。在 JavaScript 中，模块通常是由一个或多个文件组成的，每个文件都是一个独立的模块。为了在不同模块之间共享变量、函数或对象，需要使用导出和导入机制。
- 在现代 JavaScript 中，模块通常使用
export关键字导出需要共享的内容，然后使用import关键字在其他文件中导入这些内容。只有明确使用export导出的文件才被认为是模块，因此必须有导出的才能叫做模块。 - Node.js 中每个文件都是独立的模块，而且想要对外暴露的才需要导出，而且被 Node 执行的目标 JS 文件也是一个模块
哪个是 CommonJS 标准的导出语法？
- A.
export - B.
module.exports - C.
export default - D.
require
答案
答案是 B.
module.exports。CommonJS 是一种 JavaScript 模块化的标准，用于服务器端的模块加载。在 CommonJS 中，使用
module.exports来导出模块中的内容。导出的内容可以是任意 JavaScript 对象、函数、变量等。js// 在模块中导出一个变量 const myVariable = 42; module.exports = myVariable; // 在模块中导出一个函数 function myFunction() { console.log('Hello from myFunction!'); } module.exports = myFunction; // module.exports 用于将变量和函数导出，其他模块可以使用 require 来引入这些导出的内容js// 在另一个模块中引入导出的变量或函数 const importedVariable = require('./path/to/firstModule'); const importedFunction = require('./path/to/secondModule'); console.log(importedVariable); // 输出 42 importedFunction(); // 输出 "Hello from myFunction!"
- A.
哪个是 CommonJS 标准的导入语法？
- A.
import - B.
require - C.
export default - D.
import {同名变量}
答案
答案是 B.
require。在 CommonJS 标准中，使用
require来导入其他模块的内容。require是一个同步加载模块的函数，它接受模块路径作为参数，并返回导出的内容。js// 在一个模块中使用 require 导入另一个模块的内容 const myModule = require('./path/to/otherModule'); console.log(myModule.myVariable); // 访问导入模块的变量 myModule.myFunction(); // 调用导入模块的函数require函数用于加载并导入指定路径的模块。被导入的模块中的内容可以通过返回的对象进行访问。值得注意的是，CommonJS 不支持 ES6 中的import语法。
- A.
哪个是 ECMAScript 标准默认导出语法？
- A.
export - B.
export default - C.
module.exports - D.
exports
答案
答案是 B.
export default。在 ECMAScript（ES6 及更新版本）标准中，使用
export default语法来默认导出模块的内容。一个模块中可以有多个export语句，但只能有一个export default语句。js// 在模块中使用 export default 导出一个变量 const myVariable = 42; export default myVariable; // 在模块中使用 export default 导出一个函数 export default function myFunction() { console.log("Hello from myFunction!"); }js// 在另一个模块中引入默认导出的变量或函数 import importedVariable from './path/to/myModule'; importedVariable(); // 调用导入模块的函数与 CommonJS 不同，ES6 模块系统支持
import和export语法。
- A.
哪个是 ECMAScript 标准默认导入语法？
- A.
import 变量名 from '模块名或路径' - B.
import 变量名 from '只能写绝对路径' - C.
require - D.
import {同名变量}
答案
答案是 A.
import 变量名 from '模块名或路径'。在 ECMAScript（ES6 及更新版本）标准中，使用
import语法来导入模块的内容。默认导入的语法是import 变量名 from '模块名或路径'，其中变量名是你想要使用的模块导出的内容的本地名称。js// 在一个模块中使用 import 导入默认导出的内容 import myVariable from './path/to/myModule'; console.log(myVariable); // 访问导入模块的变量ES6 模块系统支持多种导入和导出的语法，包括默认导入、命名导入、和命名导出。上述示例是默认导入的用法。
- A.
哪个是 ECMAScript 标准命名导出语法？
- A.
export default - B.
module.exports - C.
exports - D.
export
答案
答案是 D.
export。在 ECMAScript（ES6 及更新版本）标准中，使用
export语法来命名导出模块的内容。通过export可以将模块中的变量、函数等标识符导出，以便其他模块可以导入并使用这些标识符。js// 在模块中使用 export 导出变量和函数 export const myVariable = 42; export function myFunction() { console.log('Hello from myFunction!'); }js// 在另一个模块中引入命名导出的变量或函数 import { myVariable, myFunction } from './path/to/myModule'; console.log(myVariable); // 访问导入模块的变量 myFunction(); // 调用导入模块的函数
- A.
哪个是 ECMAScript 标准命名导入语法？
- A.
require - B.
import {同名变量} - C.
import 变量名 - D.
export
答案
答案是 B.
import {同名变量}。在 ECMAScript（ES6 及更新版本）标准中，使用
import语法来命名导入模块的内容。命名导入的语法是import { 同名变量 } from '模块名或路径'，其中{ 同名变量 }是被导出的模块中的标识符的本地名称。js// 在一个模块中使用 export 导出变量和函数 export const myVariable = 42; export function myFunction() { console.log('Hello from myFunction!'); }js// 在另一个模块中引入命名导出的变量或函数 import { myVariable, myFunction } from './path/to/myModule'; console.log(myVariable); // 访问导入模块的变量 myFunction(); // 调用导入模块的函数
- A.
哪个是可以下载
lodash的命令？- A.
npm init -y - B.
npm init lodash - C.
npm i lodash - D.
node lodash
答案
- 答案是 C.
npm i lodash。 - 要下载
lodash库，可以使用npm（Node Package Manager）命令行工具，并执行npm install或其简写形式npm i，然后紧跟包的名称，如lodash。正确的命令是npm i lodash。
- A.
Webpack 是什么？
- A. 一个模块
- B. 静态模块打包工具
- C. 动态模块打包工具
- D. 编写网站的一个框架
答案
答案是 B. 静态模块打包工具。
Webpack 是一个用于前端开发的静态模块打包工具。它可以分析项目结构，找到 JavaScript、CSS、图片等各种资源之间的依赖关系，然后将这些资源打包成一个或多个静态资源文件。Webpack 主要用于处理模块化的前端项目，可以处理并优化前端项目中的各种资源。
Webpack 是前端的静态模块打包工具，除了
Webpack还有vite，grunt，gulp，parcel等等Webpack 的主要特点包括：
- 模块化支持： 可以使用各种模块化规范（CommonJS、AMD、ES6 Modules）来组织代码。
- 开发服务器： 提供一个开发服务器，支持实时刷新和热模块替换（Hot Module Replacement）。
- 丰富的插件系统： 可以使用各种插件来进行优化、压缩、代码分离等操作。
- 强大的 Loader 系统： 允许开发者使用各种 loader 处理非 JavaScript 资源，如 CSS、图片、字体等。
- 代码分割： 可以将代码拆分成多个块，按需加载，提高应用性能。
总体而言，Webpack 是一个用于构建现代前端应用的强大工具。
Webpack 对于前端作用？
- A. 必须使用 Webpack 才能开发前端项目
- B. Webpack 是后端的工具，对前端没什么用
- C. 基于 Node.js 加 Webpack 可以对前端代码进行工程化处理
- D. Webpack 只能打包代码，不能干别的
答案
- 答案是 C. 基于 Node.js 加 Webpack 可以对前端代码进行工程化处理。
- 对前端的文件内容进行处理后压缩输出。它可以处理前端项目中的各种资源，包括但不限于 JavaScript、CSS、图片、字体等。
如果想要把全局软件包命令作用在某个项目范围内，怎么做？
- A. 把全局软件包安装到全局，然后配置自定义命令
- B. 把全局软件包安装到局部项目中，直接运行命令
- C. 安装到哪里都行，只要配置了自定义命令就是局部的
- D. 全局软件包安装到某个项目中，并配置自定义命令，然后使用自定义命令来运行
答案
答案是 D. 全局软件包安装到某个项目中，并配置自定义命令，然后使用自定义命令来运行。
全局软件包是安装到了电脑环境中，并自动配置了环境变量，给电脑带来了命令，如果在局部使用，需要配置在当下项目的
package.json的scripts选项中。bash# 全局安装 package-name 软件包 npm install -g package-name在项目的
package.json文件中，使用scripts字段配置自定义命令。custom-command是自定义的命令名称，package-command是全局软件包提供的命令。json{ "scripts": { "custom-command": "package-command" } }在项目的命令行中使用自定义命令来运行全局软件包：
bashnpm run custom-command
执行
package.json里scripts配置的自定义命令的语法是？- A.
npm i 自定义命令名字 - B.
npm run 自定义命令名字 - C.
npm init 自定义命令名字 - D.
npm 自定义命令名字
答案
答案是 B.
npm run 自定义命令名字。要执行
package.json中scripts字段配置的自定义命令，需要使用npm run命令，后跟自定义命令的名称。例如，如果在package.json中有如下配置：json{ "scripts": { "custom-command": "echo 'Hello, custom command!'" } }那么执行自定义命令的语法：
npm run custom-command
- A.
webpack-dev-server作用？- A. 集成开发服务器环境，检测代码变化重新打包，并提供 Web 服务来访问打包后资源
- B. 可以基于它开发一个 Web 服务程序
- C. 使用 Webpack 必须有这个软件包
- D. 他是个局部软件包，需要引入到代码里使用
答案
答案是 A. 集成开发服务器环境，检测代码变化重新打包，并提供 Web 服务来访问打包后资源。
webpack-dev-server是一个用于开发环境的轻量级开发服务器，它集成了 Webpack，能够在开发过程中为项目提供一些便利功能：npm i -D webpack-dev-server- 实时刷新： 当代码发生变化时，
webpack-dev-server会自动检测并重新编译打包，然后刷新浏览器，以保持开发环境的实时预览。 - 热模块替换（HMR）： 在开发过程中，
webpack-dev-server支持热模块替换，即在不刷新整个页面的情况下替换或添加模块，提高开发效率。 - 自动打开浏览器： 默认情况下，
webpack-dev-server在启动时会自动打开默认浏览器，方便开发者查看项目。 - 配置简单： 通过简单的配置，可以方便地启动开发服务器，并指定端口、代理等选项。
- 实时刷新： 当代码发生变化时，
路径中的
@符合可能的意思？- A. 代码中修饰符
- B. 下软件包的下一个版本
- C. 解析路径的别名
- D. 在 Webpack 之外的环境也可以使用
@符号
答案
答案是 C. 解析路径的别名。
在路径中使用
@符号通常表示一种路径别名的形式，特别是在一些构建工具（如 Webpack）的配置中，可以通过配置路径别名来简化模块引入的路径。例如，在 Webpack 配置中可以使用
resolve.alias配置项来定义路径别名，其中可以使用@符号作为别名，方便引入模块时的路径书写：jsmodule.exports = { // ... resolve: { alias: { '@': path.resolve(__dirname, 'src'), // 其他路径别名配置 }, }, // ... };在上述配置中，
@被配置为指向项目根目录下的src目录，这样在代码中引入模块时就可以使用@符号代替相对路径或绝对路径，使得路径更加简洁易读。js// 以前 import Example from '../../components/Example'; // 现在 import Example from '@/components/Example';
loader的作用描述正确的是？- A. 让 Webpack 识别更多文件代码内容类型
- B. 让 Webpack 识别 CSS 和 less 文件，不能识别其他的文件类型
- C. 让 Webpack 拥有更多丰富的功能
- D. 让 Webpack 打包代码更精炼
答案
答案是 A. 让 Webpack 识别更多文件代码内容类型。
loader是 Webpack 中的一个重要概念，它允许在打包过程中对模块的源代码进行转换。loader可以理解为是一个预处理器，用于处理在模块引入时需要进行特殊处理的文件。主要作用包括但不限于：
- 文件类型转换：
loader可以让 Webpack 处理非 JavaScript 文件，将其转换为模块可以识别的格式。例如，处理 CSS 文件、图片文件等。 - 代码转换：
loader可以对 JavaScript 代码进行预处理，例如使用 Babelloader将 ES6+ 代码转换为浏览器可执行的 ES5 代码。 - 代码检验： 通过
loader可以在打包过程中对代码进行检验，例如使用 ESLintloader进行代码规范检查。 - 其他预处理： 可以通过自定义的
loader扩展 Webpack 的功能，实现各种预处理和处理过程。
jsonmodule.exports = { // ... module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, // 其他 loader 配置 ], }, // ... };- 文件类型转换：
plugins的作用描述正确的是？- A. 让 Webpack 可以在不同环境下打包代码
- B. 让 Webpack 拥有更多的功能
- C. 让 Webpack 识别更多类型文件代码内容类型
- D. 让 Webpack 打包代码更精炼
答案
答案是 B. 让 Webpack 拥有更多的功能。
plugins是 Webpack 中用于扩展功能的插件系统。通过配置plugins，你可以在 Webpack 打包的不同阶段执行一些额外的任务，以实现各种功能和优化。plugins主要用于以下目的：- 打包优化： 通过插件可以进行代码压缩（例如 UglifyJSPlugin）、消除重复代码（例如 CommonsChunkPlugin）等，以减小文件体积，提高加载速度。
- 环境变量注入： 通过插件可以向打包后的代码注入全局变量，例如定义一些环境变量，以便在代码中进行判断和处理。
- 资源管理： 插件可以帮助管理资源，例如复制静态文件（例如 CopyWebpackPlugin）或生成 HTML 文件（例如 HtmlWebpackPlugin）。
- 自定义功能： 你可以编写自己的插件以满足特定的需求，扩展 Webpack 的功能。
jsconst HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', }), // 其他插件配置 ], // ... };
主观题
作业 1 - 性别归类
- 目标：把准备好的
data.json文件内的数据，读取处理后，按照性别分类，分别输出到男.json和女.json2 个 json 文件中 - 基于作业文件夹内模板代码接着写
[
{ "name": "路飞", "gender": "男" },
{ "name": "索隆", "gender": "男" },
{ "name": "娜美", "gender": "女" },
{ "name": "罗宾", "gender": "女" },
{ "name": "真楷", "gender": "女" },
{ "name": "高阶", "gender": "女" },
{ "name": "小万", "gender": "女" }
]const fs = require('fs');
const path = require('path');
fs.readFile(path.join(__dirname, 'data/data.json'), (err, data) => {
if (err) {
console.dir(err);
return;
}
const res = JSON.parse(data.toString());
const boyData = [];
const girlData = [];
for (const item of res) {
item.gender === '男' ? boyData.push(item) : girlData.push(item);
}
fs.writeFile(path.join(__dirname, 'data/男.json'), JSON.stringify(boyData), (err) => {
err ? console.dir(err) : console.log('data/男.json 写入成功！');
});
fs.writeFile(path.join(__dirname, 'data/女.json'), JSON.stringify(girlData), (err) => {
err ? console.dir(err) : console.log('data/女.json 写入成功！');
});
});[{"name":"路飞","gender":"男"},{"name":"索隆","gender":"男"}][{"name":"娜美","gender":"女"},{"name":"罗宾","gender":"女"},{"name":"真楷","gender":"女"},{"name":"高阶","gender":"女"},{"name":"小万","gender":"女"}]作业 2 - webpack 支持 Vue 代码
- 目标：基于作业文件夹内模板代码接着实现，打包并显示网页内容 - 欢迎了解 Vue 学习即可
- 提示：百度 vue-loader 使用
面试题
什么是前端工程化
- 针对前端项目的工具和流程的优化，提高前端开发效率、协同开发效率、代码质量以及项目可维护性的一种开发方式。
- 前端工程化方案包括构建工具、自动化测试、代码规范、模块化开发、版本控制等。
- 参考文档：重学前端之前端工程化概述、Node.js 基础 - 知乎
Node.js 和浏览器执行 JS 代码的区别
- 浏览器环境，包括浏览器的窗口（BOM）和文档对象模型（DOM）
- Node.js 是使用 V8 引擎的 JavaScript 运行时环境，内置的 API，如文件系统 API，网络 API 等，这些 API 可以让开发者更方便地进行服务器端的编程。
Node.js 是什么？它的主要用途是什么
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许 JavaScript 在服务器端运行。
- Node.js 的主要用途是编写服务器端应用程序，但它也可以用于编写命令行工具、网络工具和桌面应用程序等。
Node.js 中的缓冲区是什么？它们的作用是什么
- 缓冲区 Buffer 是 Node.js 中用于处理二进制数据的机制。缓冲区是一个固定大小的内存块，它可以存储任意类型的数据，包括 ASCII、UTF-8 和 16 进制等。
- 缓冲区可以用于处理文件、网络数据和其他 I/O 操作，它们可以提高数据处理的效率和安全性。
什么是 Webpack
- webpack 是一个 javascript 的静态模块打包工具
- webpack 里一切文件皆模块，通过 loader 转换文件，通过 plugin 注入钩子
- 最后输出由多个模块组合成的文件，webpack 专注构建模块化项目
Webpack 的优点是什么
- 专注于处理模块化的项目，能做到开箱即用，一步到位
- 通过 plugin 扩展，完整好用又不失灵活
- 通过 loaders 扩展，可以让 webpack 把所有类型的文件都解析打包
- 区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展
Webpack 的构建流程是什么
webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
- 初始化参数：从配置文件读取与合并参数，得出最终的参数
- 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，开始执行编译
- 确定入口：根据配置中的 entry 找出所有的入口文件
- 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
- 完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
- 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
- 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 webpack 提供的 API 改变 webpack 的运行结果
说一下 Webpack 的热更新原理
- webpack 的热更新又称热替换（Hot Module Replacement），缩写为 HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
- HMR 的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS(webpack-dev-server) 与浏览器之间维护了一个 Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发请求来获取更改内容 (文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该 chunk 的增量更新。
- 后续的部分 (拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？) 由 HotModulePlugin 来完成，提供了相关 API 以供开发者针对自身场景进行处理，像 react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。
有哪些常见的 loader
babel-loader：把 ES6 转换成 ES5css-loader：加载 CSS，支持模块化、压缩、文件导入等特性style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
loader 和 plugin 的区别
- Loader 直译为 "加载器"。webpack 将一切文件视为模块，但是 webpack 原生是只能解析 JS 和 JSON 代码内容，如果想将其他文件也打包的话，就会用到 loader。所以 loader 的作用是让 webpack 拥有了加载和解析非 JavaScript 代码功能。
- Plugin 直译为 "插件"。Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。在 webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。
- Loader 在
module.rules中配置，也就是说他作为模块的解析规则而存在。类型为数组，每一项都是一个 Object，里面描述了对于什么类型的文件（test），使用什么加载 (loader) 和使用的参数（options） - plugin 在
plugins中单独配置。类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入。