1、Webpack入门：Webpack是什么、为什么需要Webpack、Webpack核心概念、Webpack与Vite对比

Webpack到底是什么？

说实话，我刚入行那会儿，对Webpack的第一印象就是「这玩意儿好难配」。但用久了你会发现，它本质上就是一个模块打包器。

打个比方。你写代码时，可能会拆成很多小文件——一个文件放工具函数，一个文件放组件，一个文件放样式。浏览器不认识这种模块化写法啊。Webpack干的事，就是把它们打包成一个或多个浏览器能直接运行的JS文件。

我习惯这么理解：Webpack就像个快递分拣中心。你寄出各种包裹（JS、CSS、图片），它帮你分类、压缩、贴上标签，最后统一送到客户手里（浏览器）。

一句话总结：Webpack是一个静态模块打包工具。它从入口文件出发，分析依赖关系，然后按规则转换、合并、输出最终文件。

为什么需要Webpack？

你想想看，如果没有Webpack，前端开发会是什么样？

  • 所有JS写在一个文件里，几千行代码找bug找到崩溃
  • CSS全局污染，命名全靠「驼峰+下划线+祈祷」
  • 图片手动压缩，字体文件手动转格式
  • 上线前手动合并文件，少一个逗号页面就白屏

我在项目中遇到过最典型的场景：一个老项目，引了20多个script标签。每次加载页面，浏览器要发20多次HTTP请求。用Webpack打包后，合并成3个文件，加载速度直接翻倍。

说白了，Webpack解决了三个核心痛点：

  1. 模块化——让你能用import/export写代码，不用操心浏览器兼容
  2. 资源优化——压缩、合并、Tree Shaking，能省则省
  3. 开发体验——热更新、Source Map、环境变量，开发效率拉满

我的小建议：别一上来就想着配全所有功能。先跑通最基本的打包流程，再按需加Loader和Plugin。我见过太多人第一天就被配置吓退了。

Webpack核心概念

Webpack有四个核心概念，搞懂它们，你就掌握了80%的配置逻辑。

Entry（入口）

入口就是Webpack开始打包的起点。默认是 src/index.js。

// 单入口配置
module.exports = {
  entry: './src/index.js'
};

// 多入口配置（比如你有管理后台和用户端两个页面）
module.exports = {
  entry: {
    admin: './src/admin.js',
    client: './src/client.js'
  }
};

嗯，这里要注意：多入口时，Output也要对应配置，不然文件会互相覆盖。

Output（输出）

打包完的文件放哪儿？叫什么名字？这就是Output管的。

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

多入口时，文件名要用占位符：

output: {
  filename: '[name].[contenthash].js'  // 比如 admin.abc123.js
}

contenthash是个好东西。文件内容变了，hash才变。浏览器缓存就能精准命中。

Loader（加载器）

Webpack默认只认识JS和JSON。遇到CSS、图片、TypeScript怎么办？用Loader。

Loader本质上就是个转换器。我习惯把它想象成「翻译官」——把浏览器不认识的东西，翻译成它认识的样子。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg)$/,
        type: 'asset/resource'
      }
    ]
  }
};

我曾经踩过的坑：Loader的执行顺序是从右到左，从下到上。比如上面CSS的配置，先执行css-loader解析CSS，再执行style-loader把样式注入页面。顺序写反了，直接报错。

Plugin（插件）

Loader只管文件转换。Plugin能干的事就多了——打包优化、资源管理、环境注入……几乎任何Webpack能力边界之外的事，都能用Plugin搞定。

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

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

这个插件会自动生成HTML文件，并把打包后的JS自动注入进去。省去了手动改script标签的麻烦。

概念 作用 类比
Entry 告诉Webpack从哪开始 快递的寄件点
Output 告诉Webpack打包到哪 快递的收件地址
Loader 转换非JS模块 翻译官
Plugin 执行更复杂的任务 快递的增值服务（保价、加急）

Webpack与Vite对比

最近Vite很火，很多人问我：「Webpack是不是要过时了？」

我的看法是：各有千秋，看场景选。

开发体验

Vite最大的优势是快。它利用浏览器原生ES Module，开发时不用打包，按需编译。启动一个Vite项目，基本秒开。

Webpack开发时要把所有模块打包一遍，项目大了确实慢。不过Webpack 5已经优化了不少，加上缓存配置，体验也还行。

生产构建

Vite生产环境用的是Rollup打包。Rollup对ES Module的Tree Shaking做得更干净，打包体积通常更小。

Webpack的生态更成熟。各种Loader、Plugin应有尽有。遇到奇奇怪怪的需求，Webpack基本都能找到解决方案。

配置复杂度

Vite的配置更简洁。很多功能开箱即用，比如CSS预处理、TypeScript、图片处理，基本零配置。

Webpack的配置……嗯，你懂的。不过现在有 create-react-app、vue-cli 这些脚手架，普通项目也不用从零配起。

对比维度 Webpack Vite
开发启动速度 较慢（需全量打包） 极快（按需编译）
热更新速度 模块多时变慢 毫秒级
生态丰富度 ★★★★★ ★★★★
配置复杂度 较高 较低
生产构建 Webpack打包 Rollup打包
适用场景 大型复杂项目、需要深度定制 中小型项目、追求开发体验

我的选择建议：新项目我倾向用Vite，开发效率高。老项目或者需要深度定制构建流程的，Webpack依然是稳妥之选。别盲目追新，适合团队和业务场景的才是最好的。

好了，这一章就到这里。Webpack入门其实没那么可怕，搞懂Entry、Output、Loader、Plugin这四个概念，你就已经迈过了最大的坎。下一章我们手写一个最简单的Webpack配置，把理论落地。

← 上一章 📖 返回目录 下一章 →