Webpack 是一个静态模块打包器，解决项目中分散的 import/require 依赖解析、转换与输出问题；它不处理逻辑，只负责依赖图构建、模块转换和文件生成。
Webpack 是什么，它解决什么问题
Webpack 不是“打包工具”的泛称，它是一个静态模块打包器，核心作用是把项目里分散的 import、require 语句解析成依赖图，再按规则合并、转换、输出为浏览器可运行的文件。它不处理代码逻辑，只管“怎么连、怎么转、怎么出”。如果你用 create-react-app 或 Vue CLI，底层默认就是 Webpack，但被封装掉了；一旦需要定制 CSS 处理流程、引入 WebAssembly、或做代码分割，就得直面配置。
最简 webpack.config.js 长什么样
从零开始配 Webpack，必须明确入口（entry）、输出（output）、模块规则（module.rules）这三块。下面是最小可用配置，能跑通 ES6 + React JSX：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
}
};
注意几个关键点：
-
entry必须是字符串或对象，不能是数组（除非做多入口，且要配合output.filename中的[name]占位符） -
output.path必须是绝对路径，用path.resolve()，写相对路径会报错 -
babel-loader需要单独安装：npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react - 没配
resolve.extensions的话，import App from './App'会失败，得写成import App from './App.js'
为什么加了 css-loader 还报 Cannot find module 'style-loader'
这是 Webpack 5 之后最常踩的坑：样式加载必须同时配置两个 loader —— style-loader（把 CSS 插入 DOM）和 css-loader（解析 @import 和 url()）。顺序不能错，执行顺序是从右到左：
立即学习“Java免费学习笔记（深入）”；
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // ✅ 正确：css-loader 先处理，style-loader 后插入
// ❌ 错误：['css-loader', 'style-loader'] 会导致 style-loader 接收原始字符串而非 JS 模块
}
]
}
另外，如果用了 CSS Modules，css-loader 必须加 modules: true，且 style-loader 不支持 esModule: false 等旧选项，否则 HMR 会失效。
开发时要不要用 webpack-dev-server
要，但别直接依赖全局命令。Webpack 5 开始，webpack serve 已内置，只要装了 webpack-dev-server 就能用。配置建议写在 webpack.config.js 的 devServer 字段里，而不是 CLI 参数中：
module.exports = {
// ...其他配置
devServer: {
port: 3000,
open: true,
hot: true, // 启用模块热替换（HMR）
static: './dist' // 指向输出目录，不是 src
}
};
容易忽略的点：
-
hot: true不等于自动刷新页面，React/Vue 需额外配@pmmmwh/react-refresh-webpack-plugin或vue-style-loader才能局部更新 -
static路径错误会导致 404，它服务的是构建后产物，不是源码 - 代理 API 请求要用
proxy对象，不是devServer.proxy字符串（旧写法已废弃）
真正上线前，webpack serve 一概不用——它只是开发辅助，所有生产行为必须走 webpack --mode production 输出静态文件。
