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 官方文件
ES6 模組介紹
Babel 與 Webpack 的整合