您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 綜合教學

Webpack 入門完全指南：從零構建現代前端工程化工作流

編輯：Java 綜合教學

前言：為什麼需要 Webpack？

現代 Web 應用擁有龐大的 JavaScript 代碼庫、複雜的依賴關係、TypeScript/ES6+、Sass/Less 等預處理器。手動處理極其繁瑣，Webpack 作為模塊打包器，以入口文件為起點，遞歸構建依賴圖，經 Loader 轉換、Plugin 優化，輸出瀏覽器可運行的靜態資源。

核心概念對比

工具	定位	工作方式
Grunt/Gulp	任務運行器	配置文件定義任務流：編譯→合並→壓縮
Webpack	模塊打包器	從入口分析依賴圖，Loader 處理各類文件，打包輸出

Webpack 處理速度更快、支持文件類型更豐富、可完全替代 Grunt/Gulp。

快速上手：從零創建項目

1. 初始化項目

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack webpack-cli webpack-dev-server

2. 目錄結構

webpack-demo/
├── package.json
├── webpack.config.js
├── src/
│   ├── index.js
│   ├── greeter.js
│   └── style.css
└── dist/           # 輸出目錄（自動生成）

3. 編寫源碼

// src/greeter.js
export default function greeter() {
  const el = document.createElement('div');
  el.textContent = 'Hello Webpack!';
  return el;
}

// src/index.js
import greeter from './greeter';
import './style.css';
document.getElementById('root').appendChild(greeter());

4. 基礎配置 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',
    clean: true
  },
  devServer: {
    static: './dist',
    hot: true,
    port: 8080
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ],
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }
};

5. 安裝 Loader 與 Plugin

npm install --save-dev style-loader css-loader html-webpack-plugin

6. 配置 npm scripts

"scripts": {
  "dev": "webpack serve --mode development",
  "build": "webpack --mode production"
}

7. 運行

npm run dev   # 開發模式，熱更新
npm run build # 生產構建，輸出到 dist/

核心功能深度解析

Loader：文件轉換器

將非 JS 文件轉換為 Webpack 可處理的模塊。

Loader	用途	典型配置
babel-loader	ES6+/TS/JSX → ES5	{ test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }
css-loader	解析 @import/url()	use: ['style-loader', 'css-loader']
sass-loader	SCSS → CSS	use: ['style-loader', 'css-loader', 'sass-loader']
file-loader	圖片/字體輸出	{ test: /\.(png\|jpg\|woff2?)$/, type: 'asset/resource' }
json-loader	JSON → JS 模塊	內置支持（Webpack 5+）

Plugin：構建流程擴展

Plugin	作用
HtmlWebpackPlugin	自動生成 HTML，注入打包後的 JS/CSS，支持模板、哈希緩存
MiniCssExtractPlugin	將 CSS 提取為獨立文件（生產環境必備）
DefinePlugin	定義全局常量（如 process.env.NODE_ENV）
CleanWebpackPlugin	構建前清理輸出目錄
HotModuleReplacementPlugin	啟用 HMR 熱更新

Source Map：調試利器

// 開發環境推薦
devtool: 'eval-cheap-module-source-map'
// 生產環境推薦
devtool: 'source-map'

代碼分割與緩存優化

optimization: {
  splitChunks: { chunks: 'all' },  // 提取公共模塊
  runtimeChunk: 'single',          // 分離 runtime
  moduleIds: 'deterministic'       // 穩定哈希
}
output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].chunk.js'
}

進階：生產環境配置分離

webpack.config.js          # 基礎配置
webpack.dev.js             # 開發配置 (devServer, HMR, source-map)
webpack.prod.js            # 生產配置 (minify, extract-css, hash)
webpack.common.js          # 共用配置
// 使用 webpack-merge 合併