前端

服务端

计算机基础

Webpack是一个模块打包工具。它的主要目的是为了在浏览器中使用而打包JavaScript文件，但它也能转换、打包或打包几乎任何资源或资产。Webpack会取模块及其依赖关系，并生成代表这些模块的静态资源。Webpack支持扩展性，并在网络架构和性能方面推广最佳实践。

Webpack

Webpack是一个现代JavaScript应用程序的静态模块打包器，它主要的工作就是分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（如TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 

Webpack的工作流程主要分为以下几个阶段：

### 初始化

在Webpack启动后，它会从配置文件（默认是 `webpack.config.js`）中读取配置的参数，合并命令行传递过来的参数，形成最终的配置对象。

### 编译（Compiling）

Webpack开始编译整个项目。在这个阶段，Webpack会根据配置中的入口（Entry）开始递归解析所有依赖项。配置文件中的 `entry`属性用于定义入口文件，可能是一个或多个。

### 构建（Building）

针对每个依赖项，Webpack会使用对应的loader去处理文件，例如使用 `babel-loader`来处理JavaScript文件，`css-loader`处理CSS文件，`file-loader`处理图片等资源。Loaders的定义让Webpack能够去处理非JavaScript文件（Webpack本身只理解JavaScript）。

### 生成（Output）

经过加载和转换，Webpack会根据配置中的 `output`部分，把处理过的文件生成到文件系统中。通常是在项目的 `dist`目录下生成 `bundle.js`或者其他自定义名称的文件。

### 优化（Optimizing）

在生成出来的文件中，Webpack可以进行代码压缩、分割代码以实现按需加载等优化操作。这通过配置 `plugins`来实现，比如 `UglifyJsPlugin`、`SplitChunksPlugin`等。

### 输出（Emitting）

将所有的资源文件输出到指定目录下，此时，Webpack的工作就算是完成了。

### 示例

例如，您有一个项目，其入口文件是 `src/index.js`。Webpack会解析这个文件，并解析出这个文件依赖的模块。假如 `index.js`中依赖了 `src/print.js`，Webpack会继续解析 `print.js`的依赖。

假设 `index.js`中还使用了ES6的语法和 `.scss`样式文件，那么在构建阶段，Webpack会使用 `babel-loader`将ES6代码转换为ES5代码，使用 `sass-loader`将SCSS文件转换为CSS文件，并且结合 `css-loader`和 `style-loader`将CSS代码注入到JavaScript中，这样就可以通过JavaScript将样式添加到DOM上。

在优化阶段，可能会有插件去检查代码，去除未引用的代码(dead code)，压缩混淆输出的文件，以减少文件大小和提高加载速度。

最终，在输出阶段，Webpack会在 `dist`目录下输出 `bundle.js`，其中包含了所有的应用程序代码，以及所有的样式打包成的CSS代码。

这就是Webpack的一个基本工作流程。它的强大之处在于可扩展性，通过配置文件和插件系统，可以适应各种复杂的项目需求。


Webpack 的详细工作流程

### Webpack优化手段概览

Webpack是一个现代JavaScript应用程序的静态模块打包器，它可以帮助开发者管理和打包他们的前端资源。以下是Webpack的一些常见优化手段：

#### 1. Tree Shaking
Tree Shaking是一个通过删除未使用代码来减少打包体积的过程。Webpack内置支持ES6模块的Tree Shaking，可以识别出未被引用的代码并在打包时排除它们。

##### 例子:
在开发过程中，可能会引入一个库，比如Lodash，但只使用其中的几个函数。通过配置`sideEffects`属性为`false`，Webpack可以标记并移除那些未被使用的模块，减小最终的bundle体积。

#### 2. 代码分割 (Code Splitting)
代码分割允许将代码分解为可按需加载的多个包，从而减少单个包的大小，提高加载速度。

##### 例子:
使用`import()`语法实现动态导入，将特定功能模块分割成独立的chunk，只有当用户需要时才加载这些模块。

#### 3. 使用Externals
当你使用一些CDN外部扩展或从外部引入库时，可以配置Webpack的`externals`选项，让Webpack知道这些依赖不应该打包进bundle。

##### 例子:
例如，如果你的项目使用jQuery，可以从CDN引入而不是打包到bundle中，配置`externals`让Webpack忽略它。

#### 4. 优化解析
配置`resolve`选项可以加快模块解析速度。例如，通过配置`extensions`减少文件尝试的后缀列表，设置`alias`提供路径别名减少查找路径的时间。

##### 例子:
```javascript
resolve: {
  extensions: ['.js', '.jsx'],
  alias: {
    Components: path.resolve(__dirname, 'src/components/')
  }
}
```

#### 5. 使用缓存
Webpack的`cache`选项可以启用持久化缓存，提高重建速度。

##### 例子:
在`webpack.config.js`中启用`cache`选项，使得模块在第一次构建后将转换结果缓存起来，之后的构建会加快。

#### 6. 压缩代码
利用插件如`TerserPlugin`压缩JavaScript代码，减少文件大小。

##### 例子:
在`optimization`配置中使用`TerserPlugin`来开启代码压缩。

#### 7. 优化CSS
使用如`MiniCssExtractPlugin`和`cssnano`等工具将CSS提取为单独的文件并压缩。

##### 例子:
```javascript
plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css',
  })
],
optimization: {
  minimizer: [
    new CssMinimizerPlugin(),
  ],
},
```

#### 8. 使用持久化缓存
通过设置`output.filename`使用内容哈希，当文件内容未变化时，利用浏览器缓存机制避免重新下载。

##### 例子:
```javascript
output: {
  filename: '[name].[contenthash].js',
  path: path.resolve(__dirname, 'dist')
}
```

#### 9. 使用高效的加载器和插件
例如`babel-loader`的`cacheDirectory`选项，或者`HappyPack`插件来并行处理任务。

##### 例子:
```javascript
module: {
  rules: [
    {
      test: /\.js$/,
      use: 'babel-loader?cacheDirectory=true',
      exclude: /node_modules/
    }
  ]
}
```

#### 10. 监控和分析
使用`webpack-bundle-analyzer`等工具分析bundle大小，找到优化点。

##### 例子:
通过安装并配置`webpack-bundle-analyzer

Webpack 有哪些优化手段

Webpack 的热更新，也被称作热替换（Hot Module Replacement，HMR），是一个在应用程序运行时更新、添加或删除模块，而无需完全刷新页面的过程。这一功能对于前端开发非常有用，因为它可以显著提高开发效率，让开发者看到代码变更的实时效果。

以下是其工作原理和流程的概述： 

### 热更新原理

#### 1. 服务器和客户端通过WebSocket通信

HMR 功能依赖于 WebSocket，这允许服务器向客户端推送实时更新。当你的应用正在运行时，Webpack dev server 会启动一个 WebSocket 服务器，用于监听文件的变化。

#### 2. 模块热替换插件

Webpack 使用 `HotModuleReplacementPlugin` 插件来实现模块的热替换。这个插件在编译过程中会注入 HMR runtime 代码。

#### 3. Manifest 文件

当构建过程结束时，Webpack 会产生一个 manifest 文件，用来记录每个模块的最新版本号。这个文件会告诉 HMR runtime 哪些文件发生了变化。

#### 4. 更新生命周期

HMR 有一套生命周期事件，允许开发者控制如何处理热替换，例如 `module.hot.accept`, `module.hot.decline` 和 `module.hot.dispose` 等。

### 热更新流程

#### 1. 文件修改

开发者修改一个或多个文件，Webpack 监听到文件变化并将其重新编译。

#### 2. 编译构建

Webpack 重新构建改动的模块，并生成新的 manifest 文件和更新后的模块代码。

#### 3. 文件变更通知

Webpack dev server 通过 WebSocket 向客户端发送一个或多个更新的信号（通常包含变更模块的哈希值）。

#### 4. 接收更新

客户端收到更新信号后，通过 HMR runtime 请求更新信息（即新的 manifest 文件）。

#### 5. 请求更新文件

客户端根据 manifest 文件获取最新的模块代码，通常是通过 JSONP 请求。

#### 6. 替换模块

HMR runtime 根据更新信息（manifest）解析需要更新的模块，并且对其进行替换。如果设置了模块的热替换处理函数（例如通过 `module.hot.accept`），则会先执行这些函数来处理模块的替换逻辑。

#### 7. 更新反映到视图

一旦模块更新完毕，如果是组件或样式等，变更会立即反映在应用程序的 UI 上，而无需全页刷新。

#### 示例

例如，当开发者修改了一个 React 组件的代码并保存时，Webpack 会重新编译这个模块，并推送更新到客户端。客户端接收更新后，通过 React Hot Loader 这样的库，实现 React 组件的无缝替换，使得开发者能够即时看到变更效果。

这就是热更新的基本原理和流程。在日常开发中，这样的功能极大减少了重复的加载时间，提升了开发体验和效率。


webpack 的热更新原理是什么？详细聊聊热更新的流程

### webpack 的 loader 的作用是什么？

webpack 的 loader 有着非常关键的作用。在 webpack 打包过程中，loader 负责处理源代码文件，并且将其转换成 webpack 能够处理的模块。由于 webpack 本身只理解 JavaScript，所以当我们需要在 JavaScript 代码中导入 CSS、图片或者其他非 JavaScript 文件时，就需要用到 loader。

例如，如果我们想在 JavaScript 中导入一个 CSS 文件，我们会使用 `style-loader` 和 `css-loader`。这两个 loader 分别做两件事情：

1. `css-loader` 会处理 `import` 和 `url()` 等，就像 JavaScript 模块一样处理 CSS 文件。
2. `style-loader` 会将计算后的 CSS 注入到页面的 `<style>` 标签中。

其他常用的 loader 还包括：

- `babel-loader`：将 ES6+ 代码转换成兼容性更好的 JavaScript 代码。
- `file-loader`：处理文件导入，将文件输出到输出目录，并返回文件的 URL。
- `url-loader`：像 `file-loader` 但在文件大小低于指定的限制时会返回 Data URL。
- `sass-loader`：将 SASS/SCSS 文件编译成 CSS。
- 等等。

Loader 可以链式调用，每个 loader 将上一个处理的结果传递给下一个 loader，直到最后输出 webpack 能够处理的 JavaScript 模块。

### 如何自定义一个 loader？

自定义一个 loader 需要遵循一定的步骤：

1. **创建一个 JavaScript 函数**：
   - 这个函数将接收源文件的内容作为参数。
   - 函数内部，可以使用任何 JavaScript 代码来处理输入的内容。
   - 函数最后需要返回处理后的内容，或者使用 `this.callback` 方法异步返回处理结果和可能的 map。

2. **遵守 loader 的规则**：
   - 接收源文件的内容作为参数。
   - 不修改原始内容，返回一个新的字符串或者 Buffer。
   - 在需要时，可以通过 `this.async` 返回一个异步函数。
   - 使用 `this.cacheable` 标记 loader 的结果是否可缓存。
   - 通过 `this.loaders` 访问配置中的其他 loaders。

3. **导出这个函数**：
   - 使用 `module.exports` 导出这个 loader 函数。

4. **在 webpack 配置中使用你的 loader**：
   - 在 `module.rules` 中添加一个规则来使用你的 loader。

例子：

假设我们要创建一个简单的 markdown loader，将 markdown 转换为 HTML。

```javascript
const marked = require('marked');

module.exports = function (markdown) {
  // 将 markdown 转换成 HTML
  const html = marked(markdown);
  // 返回 HTML 字符串
  return `module.exports = ${JSON.stringify(html)}`;
};
```

然后在 webpack 配置文件中使用这个 loader：

```javascript
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          { loader: 'html-loader' },
          { loader: path.resolve('./path/to/your/custom-markdown-loader.js') }
        ]
      }
    ]
  }
  // ...
};
```

注意，这里我们使用了 `html-loader` 来处理我们自定义 loader 输出的 HTML 字符串，这样做可以确保 HTML 字符串也遵循 webpack 的模块系统。

通过这种方式，开发者可以根据项目需求创建特定功能的 loader，以适应各种类型的文件处理场景。

Webpack面试题手册

Webpack 的详细工作流程

Webpack 有哪些优化手段

webpack 的热更新原理是什么？详细聊聊热更新的流程

webpack 的 loader 的作用是什么？如何自定义一个loader？