webpack 是静态模块打包器，负责将入口文件及其依赖打包成浏览器可加载的文件；它不自动写代码、不编译JSX/TS（需loader）、不压缩HTML（需插件）。
webpack 是什么，它不做什么
webpack 不是“自动帮你写代码”的工具，它是个静态模块打包器：你给它一个入口文件（比如 src/index.js），它顺着 import / require 关系把所有依赖的 JS、CSS、图片、字体等“连起来”，最终输出一或多个浏览器能直接加载的文件（如 dist/main.js）。它不编译 JSX 或 TypeScript —— 那得靠 babel-loader 或 ts-loader；它也不压缩 HTML —— 得配 html-webpack-plugin。
最简可用配置长什么样
从零开始跑通 webpack，只需要三样东西：安装、入口文件、配置文件。不需要插件、不用 loader，先让 JS 模块链跑起来。
npm init -y && npm install --save-dev webpack webpack-cli- 创建
src/index.js，里面写import './math.js'; console.log('loaded'); - 创建
math.js，内容为export const add = (a, b) => a + b; - 新建
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 看到打包结果 —— 它已把 index.js 和 math.js 合并，并保留了 ES Module 语义（虽然浏览器还不能直接执行，但结构已就绪）。
怎么让 CSS、图片也进包里
webpack 默认只认识 JS。要处理其他类型资源，必须用 loader，且 loader 的执行顺序是从右到左（类似函数调用链）。
立即学习“Java免费学习笔记（深入）”；
- CSS：装
css-loader（解析@import和url()）+style-loader（把 CSS 插入标签）；顺序必须是['style-loader', 'css-loader'] - 图片/字体：用
asset-module（webpack 5+ 内置），不用再装url-loader或file-loader - 配置示例（加在
webpack.config.js的module.rules里）：
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif|woff2?)$/i,
type: 'asset'
}
]
}
这样，你在 JS 里写 import logo from './logo.png'; document.body.style.backgroundImage = `url(${logo})`; 就能工作。注意：asset 类型会自动判断：小文件转 base64，大文件单独输出并返回路径字符串。
为什么打包后代码在浏览器里不执行
常见原因不是配置错，而是没告诉浏览器去加载生成的 JS 文件。
- webpack 只管生成
dist/main.js，不会自动生成index.html - 手动写 HTML 时，容易漏掉
，或路径写成./main.js（实际应在dist/目录下） - 更稳妥的做法是用
html-webpack-plugin：它会在每次构建时自动生成dist/index.html，并自动注入正确的 script 标签 - 别忽略开发服务器的根路径：用
webpack serve时，默认访问http://localhost:8080/，而output.publicPath默认是/；如果改过 publicPath（比如设成/assets/），就得确保 HTML 中引用的路径和它一致
真正卡住人的，往往不是 loader 怎么配，而是“生成的文件在哪”“浏览器到底请求了哪个 URL”“控制台报的是 404 还是 SyntaxError”。先开浏览器 Network 面板看请求是否成功，比翻 config 更快。
