Webpack 是一个现代 JavaScript 应用的静态模块打包工具，将 JS、CSS、图片等资源视为模块，通过依赖图打包为浏览器可运行文件，并通过 loader 处理非 JS 资源、plugin 扩展构建能力，支持代码分割与热更新。
Webpack 是一个用于现代 JavaScript 应用的静态模块打包工具。它把项目中所有资源（JS、CSS、图片、字体等）都视为模块，通过依赖关系图（dependency graph）将它们打包成一个或多个浏览器可运行的文件（如 bundle.js）。
Webpack 的核心作用：解决模块化与资源管理问题
浏览器原生只支持简单的 <script> 标签加载，不支持 CommonJS（require）、ES Module（import/export）等语法，也不懂如何处理 CSS 或 SVG。Webpack 填补了这个 gap：
- 将不同模块语法（ESM、CommonJS、AMD）统一转换、解析和合并
- 通过 loader（如
babel-loader、css-loader）处理非 JS 文件 - 通过 plugin（如
HtmlWebpackPlugin、MiniCssExtractPlugin）扩展构建能力（注入 HTML、抽离 CSS、压缩代码等） - 支持代码分割（code splitting）、懒加载（dynamic import）、热更新（HMR）等高级特性
如何用 Webpack 打包一个简单模块
以一个含 ES Module 的小项目为例：
1. 初始化项目并安装 Webpacknpm init -y<br>npm install --save-dev webpack webpack-cli
立即学习“Java免费学习笔记（深入）”；
2. 创建基础文件src/index.js：
import { add } from './math.js';<br>console.log(add(2, 3));
src/math.js：export const add = (a, b) => a + b;
npx webpack --mode=development
默认会以 src/index.js 为入口，输出到 dist/main.js。
新建 dist/index.html，引入 <script src="main.js"></script>，打开即可运行。
配置 Webpack（webpack.config.js）
当需求变复杂（比如要处理 CSS、自动注入 HTML），需手动配置：
在项目根目录创建 webpack.config.js：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
}
]
}
};
注意：style-loader 和 css-loader 需单独安装：npm install --save-dev style-loader css-loader。
常见打包流程与关键概念
- Entry：入口文件，Webpack 从这里开始构建依赖图
- Output：打包后文件的输出位置和命名规则
-
Loader：翻译器，让 Webpack 能“读懂”非 JS 文件（如
.vue、.scss、.png） - Plugin：增强器，执行资源优化、环境注入、生成 HTML 等任务
-
Mode：指定
development（开发模式，带 source map）或production（生产模式，自动压缩、Tree Shaking）
不复杂但容易忽略。理解入口、loader、plugin 这三块，就能应对大多数打包场景。
