偉龍blog

從 Webpack 開始：用模組化打包打造前端工程化管線實戰指南

—

由

Edwin
于

各位在 Vite、Rollup 等新一代打包工具滿天飛的今天，為什麼還要學 Webpack？如果你接手的是一間公司跑了五年、依賴龐雜的舊專案，或者需要高度客製化的打包流程，Webpack 依然是那把「萬能瑞士刀」。它或許不像 Vite 那樣開箱即速，但它幾乎能對打包過程的每一個環節做精細控制。本篇帶你從零認識 Webpack 的核心概念，並動手把一個簡單的前端專案打包起來。

一、Webpack 在做什麼：把「模組」織成一張網

瀏覽器原生並不支援 import/export 的模組語法（舊時代），而現代前端把程式碼拆成一個個小模組。Webpack 的工作，就是從一個入口檔（entry）出發，沿著 import 關係把所有的 js、css、圖片、字型都「追蹤」出來，織成一張依賴關係圖（dependency graph），最後全部打包成瀏覽器看得懂的靜態檔案。

重點：Webpack 的本質是「模組打包器」，一切皆模組，萬物皆可 loader。

二、四大核心概念

  • Entry（入口）：告訴 Webpack 從哪裡開始追蹤依賴，通常是 src/index.js。
  • Output（輸出）：打包完成後檔案放哪裡、叫什麼名字，預設是 dist/main.js。
  • Loader（載入器）：Webpack 只懂 JavaScript，遇到 CSS、圖片、TypeScript 就要靠 loader 把它們「翻譯」成模組，例如 css-loader、ts-loader、file-loader。
  • Plugin（插件）：在打包的生命週期中插入自定義動作，例如 HtmlWebpackPlugin 自動產出 HTML、CleanWebpackPlugin 打包前清空舊檔。

三、動手實戰：從零搭建一個 Webpack 專案

步驟 1：初始化專案並安裝依賴

npm init -y
npm install webpack webpack-cli --save-dev
npm install html-webpack-plugin --save-dev

步驟 2：建立專案結構

project/
├─ src/
│  ├─ index.js
│  └─ style.css
├─ index.html
└─ webpack.config.js

步驟 3：撰寫 webpack.config.js 設定入口、輸出與插件

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js'
  },
  plugins: [new HtmlWebpackPlugin({ template: './index.html' })],
  mode: 'development'
};

步驟 4：在 index.js 引入 CSS，體驗 loader 的作用

import './style.css';
console.log('Webpack 打包成功！');

重點：要使用 css-loader 與 style-loader，必須在 module.rules 中配置，否則 import CSS 會報錯。

步驟 5：執行打包

npx webpack

打包完成後，dist/ 下會出現帶有雜湊值的 bundle 檔，以及自動注入腳本的 index.html。

四、與 Vite 怎麼選

Vite 用瀏覽器原生 ESM 加上 esbuild 預建，開發時秒開；Webpack 則靠完整生態與高度可配置性取勝。新專案求快用 Vite，舊專案求穩、需客製化管線則 Webpack 仍是可靠選擇。兩者不是對手，而是不同場景的工具。

互動話題：

你目前的主力打包工具是 Webpack 還是 Vite？在維護老專案時，有沒有遇過 loader 配置踩坑的經驗？歡迎在留言區分享你的故事！