Day 2：Webpack Alias 簡化 React 資源管理

2024 iThome 鐵人賽

DAY 2

JavaScript

從PM到前端開發：我的React作品集之旅系列第 2 篇

16th鐵人賽 react vscode webpack react 18

carolcheng

2024-09-02 21:56:14

221 瀏覽

分享至

在前一篇文章中，我們成功地使用 Webpack 初始化了 React 專案並建立了基本的目錄結構。今天，我們將進一步優化開發環境，通過整合字體和圖片資源以及設置路徑別名，使專案更具可維護性和開發效率。

在這篇文章中，我們將整合粉圓字體和圖片資源，同時設置路徑別名，以提高開發效率和靈活性。

Step 1: Webpack 設置路徑別名

路徑別名能夠讓我們在導入文件時使用簡化的路徑，避免深層次目錄結構帶來的混亂。以下是我們將設置的兩個主要別名：

@：指向 src 目錄，讓我們輕易地引用專案內的所有文件。
@assets：指向 src/assets/ 目錄，方便引用資源。

首先，我們需要在 webpack.config.js 文件中配置路徑別名。首先，打開 webpack.config.js，在 resolve 配置中新增 alias 設定：

const path = require('path');

module.exports = {
    // ...其他配置
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),  // 使用 @ 表示 src 文件所在路徑
        },
        extensions: ['.js', '.jsx']
    }
};

Step 2: Webpack 支持圖片和字體文件

在 Webpack 中，我們需要為圖片和字體文件設定適當的規則，這樣它們可以在打包過程中被正確處理並生成獨立的資源文件。

處理圖片文件

首先，我們設定 Webpack 規則來處理各種圖片文件（如 .png、.jpg、.gif 和 .svg）。這樣，Webpack 將會把圖片作為資源獨立打包並生成對應的文件：

module.exports = {
    // ...其他配置
    module: {
        rules: [
            // ...其他規則
            {
                test: /\.(png|jpg|gif|svg)$/, // 處理圖片文件的規則
                type: 'asset/resource',  //  將圖片作為資源單獨打包
                generator: {
                    filename: 'images/[name][ext]', // 指定輸出圖片的目錄
                },
            },
        ],
    },
};

處理字體文件

接著，我們為字體文件，包含 .woff、.woff2、.eot、.ttf 和 .otf等格式：

module.exports = {
    // ...其他配置
    module: {
        rules: [
            // ...其他規則
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,  // 處理字體文件的規則
                type: 'asset/resource', // 將字體作為資源單獨打包
                generator: {
                    filename: 'fonts/[name][ext]',  // 指定輸出目錄和文件名
                },
            },
        ],
    },
};

規則說明:

test: 用來指定要處理的檔案類型，如圖片或字體。
type: asset/resource: 告訴 Webpack 將這些文件作為獨立的資源來打包，而不是嵌入到 JavaScript 文件中。
generator: 用來設定打包後文件的存放路徑和名稱。filename: 'images/[name][ext]' 表示圖片將放在 images 資料夾中，而字體則放在 fonts 資料夾中。

這樣配置後，Webpack 將自動處理專案中的圖片和字體文件，將它們打包並放置在適當的目錄下，使開發過程更加高效和便捷。

使用 `require` 或 `import`

在實際應用中，你可以使用 require 或 import 來引入圖片和字體資源。以下是兩種方式的示例：

require: 更常見於動態載入或需要兼容性考慮的場景。
```
const logo = require('@/assets/logo.png');
```
import: 更推薦在現代 JavaScript 開發中使用，適合靜態引用資源。
```
import logo from '@/assets/logo.png';
```

這兩種方式都可以與 Webpack 配置一起工作，根據你的需求選擇最適合的方式即可。

Step 3: 整合粉圓字體

在進行這一步之前，你可以使用 GitHub 上的專案 'react-webpack-starter' 中的特定一個版本(Tag) 'v0.2.0-symbolic-links-setup'。這個版本已經配置好了字體文件。執行以下指令即可自動建立字體文件的軟連結，並將字體文件映射到 src/assets/fonts 資料夾中：

git clone --recurse-submodules -b v0.2.0-symbolic-links-setup git@github.com:lumm-c/react-webpack-starter.git
npm run link-fonts

在成功配置字體文件後，你可以在 React 專案中使用以下簡單方法引入字體並應用到你的應用中：

import React from 'react';


const woff2 = require('@/assets/fonts/open-huninn-font/jf-openhuninn.woff2');
const woff = require('@/assets/fonts/open-huninn-font/jf-openhuninn.woff');


const App = () => {
    const logo = require('@/assets/logo.png');  // 使用 require 導入圖片
    const fontFace = `
    @font-face {
      font-family: 'Open Huninn';
      src: url('${woff2}') format('woff2'),
           url('${woff}') format('woff');
      font-weight: normal;
      font-style: normal;
    }`;

    // 動態創建並插入 <style> 標籤
    const style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(fontFace));
    document.head.appendChild(style);

    return (
        <div style={{ fontFamily: 'Open Huninn', textAlign: 'center', margin: '20px' }}>
            <img src={logo} alt="Logo" style={{ width: '150px', height: '150px' }} />
            <h1>歡迎來到熊貓樂園</h1>
            <p>在這裡，我們致力於保護與珍愛熊貓，並與世界分享牠們的故事。</p>
        </div>
    );
};

export default App;

說明

字體導入：使用 require 將字體文件（woff2 和 woff 格式）引入到 JavaScript 文件中。
圖片導入：使用 require 將圖片文件引入應用中並展示。
@font-face 規則：定義一個 @font-face 規則，將粉圓字體應用到頁面中。
動態注入樣式：透過 JavaScript 動態創建並插入一個標籤，將 @font-face 規則添加到頁面中。

在 Chrome 開發者工具的 Sources 頁籤中，你可以看到打包後的資源是否正確載入，如 'jf-openhuninn.woff2' 字體文件和 'logo.png' 圖片文件分別被正確放置在 fonts 和 images 資料夾中。