Webpack 入門指南：前端模組打包工具

Webpack 入門指南：前端模組打包工具

Webpack 入門指南：前端模組打包工具

什麼是 Webpack？

Webpack 是一款 前端模組打包工具，可以將 JavaScript、CSS、圖片等資源整合，提升開發與部署效率。透過 Webpack，你可以：

  • 模組化管理 JavaScript 程式碼，避免全域變數污染。
  • 最佳化靜態資源，減少 HTTP 請求，提高載入速度。
  • 支援 ES6+、TypeScript，並可與 Babel、PostCSS 等工具整合。

安裝 Webpack

1. 初始化專案

首先，建立一個新的專案目錄：

mkdir my-webpack-project && cd my-webpack-project
npm init -y

這會建立 package.json 檔案，作為專案的依賴管理。

2. 安裝 Webpack

接著，安裝 Webpack 及 Webpack CLI：

npm install webpack webpack-cli --save-dev

安裝完成後，可執行以下指令確認版本：

npx webpack --version

配置 Webpack

1. 建立 Webpack 設定檔

在專案根目錄建立 webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js',  // 輸出檔案名稱
    path: path.resolve(__dirname, 'dist') // 輸出目錄
  },
  mode: 'development' // 設定模式（可選 "production"）
};

2. 建立專案目錄結構 

mkdir src dist
touch src/index.js

src/index.js：

console.log("Hello, Webpack!");

3. 執行 Webpack 打包 

npx webpack

Webpack 會將 src/index.js 轉換並輸出到 dist/bundle.js。

使用 Loaders 處理 CSS

Webpack 預設只能處理 JavaScript，若要支援 CSS，需安裝 style-loader 和 css-loader：

npm install style-loader css-loader --save-dev

並修改 webpack.config.js：

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

然後在 src/index.js 引入 CSS：

import './styles.css';

總結

Webpack 是一款功能強大的 前端模組打包工具，本篇文章介紹了 Webpack 的安裝、基本配置以及如何載入 CSS。透過 Webpack，可以提升專案的模組化程度並最佳化靜態資源。🚀

延伸閱讀

標籤

#Webpack #JavaScript #前端工具 #模組打包 #ES6 #開發環境