在2024年春天，我踏上了自由職業的旅程。隨著對技術的熱愛與對分享的渴望，我成立了流光館Luma<∕>個人品牌，作為技術作品和記錄職業生涯的平台。
在這過程中，我決定每天撰寫一篇文章，記錄我如何一步步打造和改進個人作品集。我希望通過這30天的挑戰，不僅展示技術成果，也分享在職業轉換和自由職業旅程中的思考與感悟。如果你也在考慮轉職或提升技能，希望這個系列文章能夠為你帶來啟發和動力。
今天，我將帶領大家完成第一步：使用 Webpack 初始化一個 React 專案。我們還將著手建立一個元件庫，專門用於構建一頁式網站。每個步驟將詳細說明，並解釋其背後的原理，讓你在學習的過程中能夠更好地理解每個配置的作用。
在開始之前，請確保你已經安裝了Node.js。如果還沒有安裝，可以前往 Node.js 官方網站 下載並安裝最新版本。
安裝完成後，我們可以開始創建一個新的資料夾來存放專案。打開終端，輸入以下命令來創建資料夾並進入它：
mkdir your-project-name
cd your-project-name
'your-project-name' 是你選擇的專案名稱。
接下來，使用 npm 初始化專案，這將生成一個 package.json 檔案：
npm init --yes
然後，安裝 React、ReactDOM 和 Webpack，建立 React 開發環境和打包工具：
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core style-loader css-loader
在這個專案中，我們將不僅僅創建可重用的元件，還會設計一些範例頁面來展示這些元件的應用場景。因此，我們將目錄結構設計如下：
/your-project-name
├── public/
│ └── index.html
├── src/
│ ├── assets/ # 資源（圖片、字體等）
│ ├── components/ # React 組件
│ ├── pages/ # 頁面級組件
│ ├── styles/ # 全域樣式
│ ├── utils/ # 工具函數和輔助功能
│ ├── App.js # 主應用組件
│ ├── index.js # 應用程式入口文件
├── package.json
└── webpack.config.json
這個結構包含了三個主要部分：
components：通用組件，存放所有可重用的 UI 元件。這些元件通常是功能單一的小模塊，能夠在不同頁面或應用程式的多個地方重複使用。pages：頁面組件，存放範例頁面。這些頁面展示了如何將各種元件組合在一起構建單頁式網站，通常代表應用中的不同視圖或路由。styles：用來存放全域的樣式資源，包括變數、混合（mixins）、基礎樣式，甚至可以包括全局的佈局樣式，統一應用程序的外觀和感覺。現在，你已經準備好開始編寫 React 代碼。在這個步驟中，我們將創建一個簡單的 React 元件並將其渲染到網頁中。
import React from 'react';
const App = () => {
return <h1>Hello, World!</h1>;
};
export default App;
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>your-project-name</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
這樣，你就完成了 React 元件的基本設置和渲染。利用 VS Code 的快捷指令 rafce，你可以更快速地生成 React 元件代碼，這將有助於提升開發效率。
為了將我們的 React 代碼打包並自動注入到 HTML 文件中，我們需要配置 Webpack。
首先，在專案根目錄下創建webpack.config.js文件。接著，定義entry和output：
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js'
},
};
在 Webpack 中，我們需要配置 Babel Loader 來轉換 React 代碼，以及使用 HtmlWebpackPlugin 插件來自動生成 HTML 文件並注入打包後的腳本。
npm install --save-dev @babel/preset-react @babel/preset-env
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html' })
],
resolve: {
extensions: ['.js', '.jsx']
}
};
新增開發伺服器配置以啟用熱重載功能：
module.exports = {
// ...
devServer: {
hot: true,
port: 3000,
open: true
}
};
在 package.json 中新增以下指令：
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}
一切配置完成後，運行以下命令啟動開發伺服器：
npm start
這將自動打開瀏覽器並顯示你的 React 應用。
恭喜你！你已經成功使用 Webpack 初始化了一個 React 專案，並完成了基本的配置和 React 元件的設置。為了更好地跟隨這個系列教學，你可以參照專案react-webpack-starter中的標籤 v0.1.0，並查閱其中的[提交記錄]，以幫助你建立屬於自己的專案。
在下一篇文章中，我們將深入探討如何配置 Webpack 以處理圖片和字體文件，並設置路徑別名以簡化程式碼引用。我們會介紹如何高效地管理資源，提升代碼結構的清晰度和可維護性。
期待在下一次分享中，與你一起繼續這段技術探索的旅程！
iThome鐵人賽
看影片追技術