webpack 核心概念
webpack 是最经典的打包器，核心五个概念：entry（入口，依赖图的起点）、output（产物写在哪）、loader（把非 JS 文件翻译成模块，如 .vue/.css/.png）、plugin（干翻译之外的任何事，如拷贝文件、注入环境变量）、mode（development/production，决定压缩与优化行为）。
webpack 的强项是极其灵活、生态成熟，几乎什么需求都有现成插件；代价是配置复杂、启动慢。大型存量项目仍是 webpack 的天下。
- loader 链：从右往左执行，babel-loader 处理 JS、css-loader 处理 CSS
- plugin 在构建生命周期的钩子上工作（如 HtmlWebpackPlugin 自动生成 HTML
- mode: production 自动开启压缩、Tree Shaking、分包优化
配置
// webpack.config.js —— 最小可用配置 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', // 或 'production' entry: './src/main.js', // 入口：依赖图从这里展开 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.[contenthash].js', // 内容哈希，用于长效缓存 }, module: { rules: [ // loader：非 JS 文件 -> 模块 { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 从右往左：先 css-loader { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.(png|jpg)$/, type: 'asset/resource' }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), // 自动注入打包后的脚本 ], devServer: { static: './dist', port: 3000, hot: true }, };
本节要点webpack 五概念：entry / output / loader / plugin / mode；灵活但配置量大。
