Webpack 是现代前端打包工具，通过构建模块依赖图、用 loader 转换非 JS 资源（如 Sass、CSS、图片）、用 plugin 注入额外逻辑（如压缩、自动注入），将分散代码打包为浏览器可运行的静态文件。
Webpack 是一个现代前端资源打包工具，它能把 JavaScript、CSS、图片、字体等各类模块看作“模块”，通过依赖关系图把它们打包成浏览器能直接运行的静态文件。
Webpack 的核心作用
前端项目越来越复杂，代码分散在多个文件里，浏览器不支持直接 import 除 JS 外的资源（比如 .scss、.png），也不理解 ES6+ 语法或 JSX。Webpack 做三件事：
- 分析代码中 import/require 的依赖关系，生成一张“模块依赖图”
- 用 loader 转换非 JS 资源（如把 Sass 编译成 CSS，把 TypeScript 编译成 JS）
- 用 plugin 注入额外逻辑（如自动注入 script 标签、压缩代码、清理旧文件）
一个最简打包流程（以 JS 为例）
假设你有 src/index.js，它引入了另一个文件：
// src/index.js
import { add } from './math.js';
console.log(add(2, 3));
只需三步就能打包：
立即学习“Java免费学习笔记（深入）”；
- 全局安装 Webpack：npm install -g webpack webpack-cli
- 初始化项目：npm init -y，再本地安装：npm install --save-dev webpack webpack-cli
- 运行打包命令：npx webpack --entry ./src/index.js --mode development
执行后，Webpack 自动生成 dist/main.js，里面已包含 index.js 和 math.js 的合并代码，且做了基础兼容处理。
处理 CSS、图片等资源需要 loader
Webpack 默认只认识 JS。想导入 CSS，得加 loader：
- 安装：npm install --save-dev style-loader css-loader
- 在 JS 中写：import './style.css';
- 配置 webpack.config.js：
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
这里 css-loader 解析 CSS 中的 @import 和 url()，style-loader 把最终 CSS 插入页面
中。类似地，图片可用 file-loader 或 url-loader 处理。常用配置项和优化建议
真实项目一般会建 webpack.config.js 文件统一管理。关键配置包括：
- entry：入口文件路径（如 './src/index.js'）
- output：输出位置（如 path: path.resolve(__dirname, 'dist'), filename: 'bundle.js'）
- mode：设为 'development'（带 source map）或 'production'（自动压缩）
- devServer：配合 webpack-dev-server 实现热更新（保存即刷新）
- optimization.splitChunks：提取公共代码（如多页面共用的 React 库单独打包）
不需要从零写配置——可以用 npx create-react-app 或 Vue CLI，它们底层都封装了 Webpack，开箱即用。
