Webpack 的世界观：一切皆模块。从 entry（入口）出发，沿 import 递归构建依赖图，每个文件经对应的 loader（如 babel-loader 编译 JS、css-loader 解析 CSS）转换，最后按规则输出若干 bundle。plugin 在整个生命周期的钩子（hooks）上扩展能力：压缩、抽 CSS、生成 HTML、复制资源。
核心概念清单：entry（入口）、output（产物路径与命名）、loader（文件转换器，链式从后往前执行）、plugin（插件，范围更广的能力注入）、mode（dev/prod 决定默认优化）、resolve.alias（路径别名）。理解了「依赖图 + loader 转换 + plugin 钩子」就抓住了 webpack 骨架。
// webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', // 决定默认优化策略 entry: './src/main.js', // 入口 output: { filename: '[name].[contenthash:8].js', // 内容哈希 → 长效缓存 path: path.resolve(__dirname, 'dist'), }, module: { rules: [ // loader：从后往前执行（先 css 后 style） { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, ], }, plugins: [new HtmlWebpackPlugin({ template: 'index.html' })], resolve: { alias: { '@': path.resolve('src') } }, };