Webpack 的核心概念有哪些？entry/output/loader/plugin/chunk 的作用是什么？

1. Entry（入口）：

• 打包的起点，Webpack 从这里开始分析依赖
• 支持单入口（entry: './src/index.js'）或多入口（对象形式）

2. Output（输出）：

• 打包结果的位置和文件名
• output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[contenthash].js' }
• contenthash 实现缓存更新

3. Loader（加载器）：

• 用于处理非 JS 文件（CSS、图片、TypeScript、Vue 等）
• 本质是转换函数：输入文件内容，输出转换后的内容
• 链式调用（从右到左）：use: ['style-loader', 'css-loader']
• 常见 loader：babel-loader、ts-loader、vue-loader、css-loader、file-loader

4. Plugin（插件）：

• 在 Webpack 构建流程的不同阶段（hooks）执行自定义任务
• 功能更强大：优化资源、注入环境变量、生成 HTML 等
• 常见 plugin：HtmlWebpackPlugin、MiniCssExtractPlugin、BundleAnalyzerPlugin

5. Chunk（代码块）：

• 打包后的输出文件块
• 类型：initial（入口 chunk）、async（动态 import 的 chunk）、runtime（运行时）
• 通过 splitChunks 配置代码分割

6. Module（模块）：

• Webpack 中所有资源（JS/CSS/图片/字体）都被视为模块
• 通过 rules 配置 loader 处理不同类型模块