Day 1：Webpack 初始化 React 專案

在2024年春天，我踏上了自由職業的旅程。隨著對技術的熱愛與對分享的渴望，我成立了流光館Luma<∕>個人品牌，作為技術作品和記錄職業生涯的平台。

在這過程中，我決定每天撰寫一篇文章，記錄我如何一步步打造和改進個人作品集。我希望通過這30天的挑戰，不僅展示技術成果，也分享在職業轉換和自由職業旅程中的思考與感悟。如果你也在考慮轉職或提升技能，希望這個系列文章能夠為你帶來啟發和動力。

今天，我將帶領大家完成第一步：使用 Webpack 初始化一個 React 專案。我們還將著手建立一個元件庫，專門用於構建一頁式網站。每個步驟將詳細說明，並解釋其背後的原理，讓你在學習的過程中能夠更好地理解每個配置的作用。

Step 1: 創建專案資料夾

在開始之前，請確保你已經安裝了Node.js。如果還沒有安裝，可以前往 Node.js 官方網站下載並安裝最新版本。安裝完成後，我們可以開始創建一個新的資料夾來存放專案。打開終端，輸入以下命令來創建資料夾並進入它：

mkdir your-project-name
cd your-project-name

‘your-project-name’ 是你選擇的專案名稱。

Step 2:初始化專案並安裝依賴

接下來，使用 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

Step 3:建立目錄結構

在這個專案中，我們將不僅僅創建可重用的元件，還會設計一些範例頁面來展示這些元件的應用場景。因此，我們將目錄結構設計如下：

/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）、基礎樣式，甚至可以包括全局的佈局樣式，統一應用程序的外觀和感覺。

Step 4: 編寫基本的 React 代碼

現在，你已經準備好開始編寫 React 代碼。在這個步驟中，我們將創建一個簡單的 React 元件並將其渲染到網頁中。

4.1 創建 React 元件

如果你使用的是 Visual Studio Code，建議安裝 ES7+ React/Redux/React-Native snippets 擴充套件，這將幫助你更快速地生成基本的 React 元件代碼。

首先，在 src 目錄中創建一個新文件 App.jsx。打開 App.jsx，輸入 rafce，然後按下 Enter，這將自動生成一個基礎的 React 元件。最後，依照以下內容修改程式碼示。

import React from 'react';
const App = () => {
    return <h1>Hello, World!</h1>;
};
export default App;

4.2 在 index.js 中渲染元件

在 index.js 中，將 App 元件導入並渲染到 index.html 中的 root 節點:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

4.3 更新 index.html 中渲染元件

確保 HTML 文件正確設置，index.html 文件應該如下所示：

<!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 元件代碼，這將有助於提升開發效率。

Step 5: 配置 Webpack

為了打包我們的 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'
    },
};

Step 6: 配置 Babel Loaders 和 Plugins

6.1 安裝 Babel Loaders

首先，安裝用於轉譯 React 和現代 JavaScript 語法的 Babel 預設配置：

npm install --save-dev @babel/preset-react @babel/preset-env

6.2 配置 .babelrc 文件

接著，在專案根目錄下創建或更新 .babelrc 文件，並添加以下配置：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

6.3 更新 Webpack 配置文件

在 webpack.config.js 文件中，配置 Babel Loader 以處理 .js 和 .jsx 文件，並引入 HtmlWebpackPlugin 插件來自動生成 HTML 文件。以下是完整的配置範例：

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']
    }
};

Step 7: 設置開發伺服器

新增開發伺服器配置以啟用熱重載功能：

module.exports = {
    // ...
    devServer: {
        hot: true,
        port: 3000,
        open: true
    }
};

Step 8 : 配置 NPM 腳本並啟動開發伺服器

在 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 以處理圖片和字體文件，並設置路徑別名以簡化程式碼引用。我們會介紹如何高效地管理資源，提升代碼結構的清晰度和可維護性。

期待在下一次分享中，與你一起繼續這段技術探索的旅程！

Table of Contents