Webpack的核心概念？常见优化手段？

一、Webpack 核心概念

Webpack 本质是一个 模块打包器（module bundler） ，核心思想就一句话：

👉 把一切资源当成模块，然后构建依赖图，打包输出

1. Entry（入口）

项目从哪里开始打包

vbnet 复制代码

entry: './src/index.js'

👉 相当于依赖分析的起点

2. Output（输出）

打包后的文件输出到哪里

css 复制代码

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

3. Module（模块）

Webpack 默认只认识 JS、JSON

👉 其他资源（CSS、图片、TS）都需要处理

4. Loader（加载器）

👉 让 Webpack 能处理非 JS 文件

本质：文件转换器

例如：

css 复制代码

module: {
  rules: [
    {
      test: /.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}

常见 loader：

babel-loader（ES6 → ES5）
ts-loader（TS → JS）
css-loader / style-loader
file-loader / url-loader（已被 asset modules 替代）

5. Plugin（插件）

👉 扩展 Webpack 功能（更强大）

例如：

vbnet 复制代码

plugins: [
  new HtmlWebpackPlugin(),
  new MiniCssExtractPlugin()
]

常见用途：

生成 HTML
压缩代码
提取 CSS
环境变量注入

6. Mode（模式）

arduino 复制代码

mode: 'development' | 'production'

区别：

development：快，不压缩
production：慢，但优化好

7. Chunk（代码块）

👉 打包过程中生成的代码块

来源：

入口
动态 import
splitChunks

8. Bundle（最终文件）

👉 浏览器真正加载的文件

9. Dependency Graph（依赖图）

👉 Webpack 最核心机制

css 复制代码

index.js → a.js → b.js → c.css

Webpack 会递归分析所有依赖 → 构建图 → 打包

二、常见优化手段（重点🔥）

优化可以分为三类：

1️⃣ 构建速度优化（开发体验）

✅ 缩小打包范围

javascript 复制代码

include: path.resolve(__dirname, 'src')
exclude: /node_modules/

✅ 使用缓存

css 复制代码

cache: {
  type: 'filesystem'
}

✅ 多进程打包（thread-loader）

perl 复制代码

use: ['thread-loader', 'babel-loader']

✅ 使用更快的工具替代

babel → swc / esbuild
terser → esbuild压缩

✅ 合理使用 sourceMap

vbnet 复制代码

devtool: 'eval-cheap-module-source-map'

✅ 开发环境用 HMR（热更新）

yaml 复制代码

devServer: {
  hot: true
}

2️⃣ 打包体积优化（上线性能）

✅ Tree Shaking（摇树优化）

👉 删除无用代码（ES Module 必须）

vbnet 复制代码

usedExports: true

前提：

使用 ES Module（import/export）
package.json 设置：

json 复制代码

"sideEffects": false

✅ 代码分割（Code Splitting）

动态加载

go 复制代码

import('./module')

配置拆包

css 复制代码

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

👉 拆分：

vendor（第三方库）
公共代码

✅ 压缩代码

默认 production 已开启：

JS：Terser
CSS：css-minimizer-webpack-plugin

✅ 提取 CSS

scss 复制代码

new MiniCssExtractPlugin()

👉 避免 JS 里插入 style，提高加载性能

✅ 图片优化

使用 asset/resource
小图转 base64
图片压缩（image-minimizer）

✅ Gzip / Brotli 压缩

scss 复制代码

new CompressionPlugin()

3️⃣ 运行时性能优化

✅ 懒加载（Lazy Load）

javascript 复制代码

const Comp = React.lazy(() => import('./Comp'))

✅ CDN 加速

css 复制代码

externals: {
  react: 'React'
}

👉 不打包 React，用 CDN

✅ 缓存优化（关键🔥）

文件名加 hash

ini 复制代码

filename: '[name].[contenthash].js'

👉 浏览器长期缓存

✅ runtime 分离

css 复制代码

optimization: {
  runtimeChunk: 'single'
}

三、面试总结（可以直接背）

👉 核心概念一句话：

Webpack 是一个基于依赖图的模块打包工具，通过 Entry 构建依赖关系，使用 Loader 处理模块，Plugin 扩展功能，最终输出 Bundle。

👉 优化三板斧：

构建优化
- 缓存、多线程、缩小范围
体积优化
- Tree Shaking、代码分割、压缩
运行优化
- 懒加载、CDN、缓存