Webpack 是一个静态模块打包器，从入口文件递归解析 import/require 等模块依赖，输出浏览器可运行的 bundle；需通过 loader（如 css-loader、style-loader）和 plugin 扩展能力，不直接编译或压缩资源。
Webpack 是什么：前端资源的“打包调度中心”
Webpack 不是构建工具的代名词，也不是必须用的“标配”。它本质是一个静态模块打包器（static module bundler），核心任务是：从一个或多个入口文件（如 src/index.js）出发，递归解析所有 import、require、import() 甚至 CSS 中的 @import 和 HTML 中的 img src，把它们看作“模块”，最终输出一个或多个浏览器可直接运行的 bundle 文件。
它不直接处理“编译 JS”或“压缩图片”，而是靠插件（plugin）和加载器（loader）扩展能力。比如：
-
babel-loader负责把 ES2022 语法转成 ES5 -
css-loader+style-loader让import './style.css'可以工作 -
HtmlWebpackPlugin自动生成带正确script引用的index.html
怎么初始化一个最小可用 Webpack 打包流程
不需要脚手架，三步搭出能跑的打包链路：
- 全局或项目本地安装：
npm init -y && npm install --save-dev webpack webpack-cli
- 创建最简入口文件
src/index.js，内容为console.log('hello webpack') - 新建
webpack.config.js，写入基本配置：const path = require('path');
module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') } };
- 运行打包：
npx webpack
，生成dist/main.js
此时你还没加任何 loader，所以不能 import CSS 或 JSX —— 这不是 bug，是默认行为。
立即学习“Java免费学习笔记（深入）”；
为什么 import CSS 会报错：loader 必须显式声明
Webpack 默认只理解 JavaScript 模块。当你写 import './style.css'，它会尝试把 CSS 当 JS 解析，于是报错：
Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.
解决方式是配置两个 loader：
-
css-loader：解析 CSS 中的@import和url()，把 CSS 转成 JS 模块 -
style-loader：把 CSS 字符串插入到页面的标签中
安装并改配置：
npm install --save-dev css-loader style-loader
在 webpack.config.js 中加入：
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
}
注意顺序：从右往左执行（css-loader 先处理，再交给 style-loader），反了就失效。
开发时别手动重跑：用 webpack-dev-server 实时响应
每次改代码都执行 npx webpack 效率极低。换成开发服务器：
- 安装：
npm install --save-dev webpack-dev-server
- 在
package.json的scripts中加："dev": "webpack serve --mode development"
- 启动：
npm run dev
它会在内存中编译（不写入磁盘），支持 HMR（模块热替换），改完 CSS/JS 自动刷新或局部更新。但注意：
真正上线前，仍需执行 npx webpack --mode production 输出静态文件。
Webpack 的复杂性不在概念本身，而在 loader 和 plugin 的组合逻辑——同一个需求（比如处理图片），可能有 file-loader、url-loader、asset-module 三种写法，而 Webpack 5 默认推荐后者，旧教程里的配置很可能已过期。
