介绍Webpack

1. 基本概念

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它将项目中的各种资源（JS、CSS、图片等）视为模块，通过分析模块间的依赖关系，将它们打包成一个或多个 bundle。

2. 核心概念

Entry（入口）

构建的起始点，Webpack 从这里开始分析依赖关系

module.exports = {
  entry: './src/index.js'
};

Output（出口）

定义打包后文件的输出位置和命名

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

Loader（加载器）

处理非 JavaScript 文件，将它们转换为模块

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.tsx?$/, use: 'ts-loader' }
    ]
  }
};

Plugin（插件）

执行更广泛的任务，如优化、压缩、环境变量注入等

const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

3. 主要功能

模块化支持

支持 ES6 modules、CommonJS、AMD 等模块规范
自动解析模块依赖关系

代码分割

将代码分割成多个 chunk，实现按需加载
提高应用性能

热更新（HMR）

开发时修改代码后无需刷新页面即可看到效果

资源优化

Tree Shaking：删除未使用的代码
代码压缩、图片优化等

4. 工作流程

入口分析 - 从 entry 开始解析依赖
模块解析 - 递归分析所有依赖模块
Loader 处理 - 使用相应 loader 转换文件
Plugin 执行 - 在构建过程中执行插件
输出文件 - 生成最终的 bundle 文件

5. 优缺点

优点：

功能强大，生态系统丰富
支持各种模块规范和文件类型
高度可配置，适应复杂需求
成熟稳定，大型项目首选

缺点：

配置复杂，学习曲线陡峭
构建速度相对较慢
配置文件可能变得很庞大

6. 与其他工具的对比

vs Vite

Webpack：成熟稳定，功能全面，但构建较慢
Vite：开发快速，配置简单，但生态相对较新

vs Rollup

Webpack：适合应用程序打包
Rollup：更适合库的打包

7. 实际应用场景

大型 SPA 应用 - React、Vue、Angular 项目
多页面应用 - 传统网站的现代化改造
组件库打包 - 配合适当配置打包组件库
微前端架构 - 模块联邦等高级功能

前端面试题库

探索