1、Webpack入门：Webpack是什么、为什么需要模块打包、Webpack核心概念（Entry、Output、Loader、Plugin）、Webpack与Vite/Rollup的对比

Webpack到底是什么？

说实话，我刚入行那会儿，对Webpack的第一印象就是「一个很能打的打包工具」。但如果你让我用一句话说清楚——Webpack本质上是一个静态模块打包器（module bundler）。

什么意思呢？你想想看，我们写前端代码时，会拆成很多文件：JS、CSS、图片、字体……浏览器可没法直接处理这些零散的模块依赖。Webpack干的事，就是把它们「揉」成一个或多个浏览器能识别的静态资源。

我在项目中遇到过不少新人，上来就问：「我直接用script标签引入不就行了？为什么非要用Webpack？」嗯，这个问题问得好，咱们接着往下看。

为什么需要模块打包？

说白了，没有模块打包，你的项目会变成一团乱麻。我总结了几点核心原因：

• 模块化开发：ES Module、CommonJS、AMD……这些规范浏览器没法全部原生支持。Webpack帮你统一处理。
• 依赖管理：你引入一个库，它又依赖另一个库，手动维护顺序？不现实。Webpack自动分析依赖图。
• 性能优化：代码压缩、Tree Shaking、代码分割……这些手动做？累死你。
• 资源处理：CSS预处理器、TypeScript、图片压缩……Webpack通过Loader统统搞定。

Webpack核心概念

这部分我建议你死记硬背——不是开玩笑，这四个概念是Webpack的骨架。我面试别人时，第一个问题就是「说说Webpack的四大核心概念」。

Entry（入口）

入口就是Webpack开始构建依赖图的起点。你可以理解成「你家大门」。Webpack从这进去，一路把所有依赖都找出来。

// webpack.config.js
module.exports = {
  entry: './src/index.js'
};

我个人习惯用单入口，但如果你做多页面应用，也可以配置多个入口。我曾经在一个老项目中见过十几个入口的配置……嗯，那维护起来确实酸爽。

Output（输出）

输出就是打包后的文件放哪儿。说白了，你告诉Webpack：「活干完了，东西放这个文件夹里」。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

Loader（加载器）

Loader是Webpack的「翻译官」。Webpack原生只认识JS和JSON，但你的项目里可能有TypeScript、SCSS、图片……怎么办？Loader上场。

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

我记得有一次，一个同事把loader顺序写反了，结果样式死活不生效。这里提醒一下：Loader的执行顺序是从右到左，从下到上。比如上面的CSS，先css-loader解析，再style-loader注入。

Plugin（插件）

Plugin能干Loader干不了的事。比如打包优化、资源管理、环境变量注入……Plugin的灵活性更高，能触及Webpack编译的整个生命周期。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

Webpack与Vite/Rollup的对比

这个问题面试常考，也是你选型时必须想清楚的。我直接给你一张对比表：

特性	Webpack	Vite	Rollup
定位	全能型打包器	开发服务器+打包器	库/组件打包器
开发体验	冷启动慢，HMR还行	冷启动极快，HMR极快	一般（主要用于构建）
打包策略	基于模块依赖图	基于ES Module原生支持	基于ES Module + Tree Shaking
配置复杂度	高（配置项多）	低（开箱即用）	中
适用场景	大型项目、复杂应用	中小型项目、快速原型	库、组件库、工具库
插件生态	最丰富	快速增长中	较丰富

你可能会问：「那我到底该选哪个？」我的建议是：

• 做大型企业级应用：选Webpack。生态最全，踩坑的人最多，你遇到问题基本都能搜到答案。
• 做中小型项目或快速迭代：选Vite。开发体验真的好，我最近几个新项目全用的Vite，真香。
• 写一个npm库或组件库：选Rollup。打包出来的代码更干净，Tree Shaking效果更好。

好了，第一章的内容就到这里。Webpack入门其实不难，关键是理解它「为什么存在」以及「核心概念怎么配合」。下一章我们会深入Entry和Output的配置细节，到时候见。