天天看點
傳回

【利用AI讓知識體系化】Webpack 相關配置技巧

作者：阿珊和她的貓
【利用AI讓知識體系化】Webpack 相關配置技巧

章節一：了解 Webpack

Webpack 是什麼？

Webpack 是一個現代化的 JavaScript 應用程式打包器，它主要用于打包前端代碼資源，例如 JS 檔案、CSS 檔案、圖檔等，然後生成可以在浏覽器中運作的靜态資源。

Webpack 采用子產品化的方式進行打包，可以将多個 JavaScript 子產品合并成一個檔案，減少 HTTP 請求，提升網站性能。同時，Webpack 支援各種類型的加載器和插件，可以通過加載器将 Webpack 能夠了解的子產品轉換成浏覽器能夠識别的格式，通過插件進行各種任務的擴充，例如壓縮代碼、拷貝檔案、生成 HTML 檔案等等。

Webpack 已經成為當今前端項目建構領域中的主流工具，是現代前端項目必不可少的一環。

【利用AI讓知識體系化】Webpack 相關配置技巧

為什麼使用 Webpack？

使用 Webpack 可以帶來多方面的好處：
  1. 子產品化開發：Webpack 支援通過子產品化的方式開發前端代碼，通過将各種類型的檔案都視為子產品，使得代碼更易于維護和擴充。
  2. 自動化建構：Webpack 可以将多個檔案打包成一個檔案，進而減少 HTTP 請求，提升頁面加載速度。同時，Webpack 還可以自動化執行各種任務，例如壓縮代碼、拷貝檔案、生成 HTML 檔案等等，簡化了項目建構流程，提高了開發效率。
  3. 加載器和插件：Webpack 支援各種類型的加載器和插件，進而可以使用各種工具和技術來處理資源檔案，例如 Babel、CSS 預處理器、圖像壓縮等等，使得前端開發更加靈活多樣。
  4. 易于內建：Webpack 可以與各種架構和庫無縫內建，例如 React、Vue.js、Angular 等等，提供了豐富的插件和加載器來支援這些架構和庫。

綜上，使用 Webpack 可以幫助前端開發者以更加高效和靈活的方式建構現代化的前端應用。

Webpack 的基本概念

Webpack 的基本概念包括：
  1. 入口(entry)：Webpack 通過入口來指定打包的起點，在打包過程中會分析入口及其依賴的子產品，生成相應的輸出檔案。
  2. 輸出(output)：Webpack 通過輸出來指定打包生成的輸出檔案的位置和名稱等資訊。
  3. 加載器(loader)：Webpack 通過加載器來處理資源檔案，例如将 ES6 代碼轉換成 ES5 代碼、處理 CSS 檔案、壓縮圖像等等。
  4. 插件(plugin)：Webpack 通過插件來擴充其功能，例如壓縮代碼、生成 HTML 檔案、拷貝靜态檔案等等。
  5. 模式(mode)：Webpack 通過模式來指定打包的模式，可以選擇 development、production 或者 none 等模式。
  6. 打包器(bundle)：Webpack 将所有的代碼和依賴打包成一個或者多個 bundle，集中管理和部署這些 bundle 可以有效地提升網站性能。
  7. 負載器(loader)和插件(plugin)的組合：Webpack 通過将不同的負載器(loader)和插件(plugin)組合來處理不同類型的資源，例如處理 JS 檔案、處理 CSS 檔案、處理圖檔等等。

總的來說，掌握這些基本概念可以有效地了解并使用 Webpack 進行前端項目建構。

Webpack 的核心概念和實作原理

Webpack 的核心概念包括子產品、依賴圖和 Chunk。
  1. 子產品：在 Webpack 中，一切都可以視為子產品，包括 JS 檔案、CSS 檔案、圖檔等等。子產品是 Webpack 打包的基本機關。每個子產品都有一個唯一的辨別符，可以通過這個辨別符來區分不同的子產品。
  2. 依賴圖：在 Webpack 的打包過程中，每個子產品都可能依賴于其他的子產品，進而構成了一個依賴圖。Webpack 會根據這個依賴圖來确定每個子產品在打包中的順序。
  3. Chunk：在 Webpack 的打包過程中，多個子產品可能會被合并成一個或多個 Chunk。這些 Chunk 包含了被合并的子產品及其依賴的其他子產品。Chunk 被 Webpack 打包後，會生成對應的靜态檔案，可以在浏覽器中運作。
實作原理：

Webpack 的打包過程分為以下幾個步驟：

  1. 解析配置檔案：Webpack 會首先通過配置檔案中的配置資訊來确定入口和輸出檔案的相關設定。
  2. 解析入口子產品：Webpack 會根據入口子產品的路徑，解析出這個子產品及其依賴的其他子產品。
  3. 解析子產品依賴：Webpack 會遞歸地對每個子產品的依賴進行解析，找出所有的依賴子產品。
  4. 加載子產品：Webpack 會根據配置檔案中的定義和子產品的類型，使用相應的加載器來加載子產品。
  5. 轉換子產品：Webpack 會根據配置檔案中的定義，使用相應的轉換器來對子產品進行轉換，例如将 ES6 代碼轉換成 ES5 代碼、處理 CSS 檔案、壓縮圖像等等。
  6. 打包子產品：Webpack 會根據子產品之間的依賴關系，将子產品打包成一個或多個 Chunk。
  7. 輸出檔案：Webpack 會将打包好的 Chunk 輸出到指定的輸出目錄中，生成可以在浏覽器中運作的靜态檔案。

總的來說，Webpack 的實作原理是基于子產品之間的依賴關系，通過解析子產品的路徑、加載子產品的内容、轉換子產品的代碼和打包子產品成 Chunk 等一系列的步驟來實作前端項目的建構。

章節二：安裝和配置 Webpack

安裝 Webpack

要安裝 Webpack，首先你需要在你的系統上安裝 Node.js 和 npm（Node Package Manager）。

Node.js 可以在官網 https://nodejs.org/en/ 上下載下傳并安裝。

安裝完成後，可以在終端中使用以下指令來檢查 Node.js 和 npm 的版本：

node -v
npm -v

安裝完成 Node.js 和 npm 之後，可以使用 npm 來安裝 Webpack。在終端中進入你的項目目錄下，執行以下指令來安裝 Webpack：

npm install webpack webpack-cli --save-dev

其中， --save-dev 參數表示将 Webpack 安裝為開發依賴。安裝完成後，你可以在項目中使用 Webpack 進行打包。

配置 Webpack

Webpack 的配置檔案通常命名為 webpack.config.js，這個檔案位于項目的根目錄下，用于配置 Webpack 的各種選項。

一個最基本的 Webpack 配置檔案如下： 
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

這個配置檔案設定了入口檔案為 ./src/index.js，輸出檔案的路徑為 ./dist/main.js。

在這個配置檔案中，我們使用了 Node.js 的子產品系統，引入了 Node.js 中的 path 子產品，并在 output 中使用了 path.resolve() 函數來設定輸出檔案路徑。該函數根據傳入的路徑參數生成絕對路徑，確定輸出檔案的路徑始終是絕對路徑。

你可以根據你的項目需要，添加各種配置選項，例如設定 Loader，啟用插件等等。

以下是一個典型的 Webpack 配置檔案示例： 
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  entry: '/src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
}

在這個配置檔案中，我們啟用了 production 模式，并配置了三個 Loaders 和兩個插件：

  • 對于 JavaScript 檔案，使用了 Babel 來處理 ES6/7 轉 ES5，并剔除不需要的文法和代碼。
  • 對于 CSS 檔案，使用了 MiniCssExtractPlugin 來将 CSS 提取為單獨的檔案并進行壓縮。
  • 對于圖檔等資源檔案，使用了 Asset Modules 将檔案轉換為 data URI 或儲存為檔案，取決于檔案大小。

我們還使用了 HtmlWebpackPlugin 和 MiniCssExtractPlugin 插件，用于生成 HTML 檔案和 CSS 檔案。

以上示例中隻是幾個簡單的配置示例，Webpack 功能非常強大，具體配置要根據項目需求來設定。

Webpack 的常用配置項

Webpack 的配置項非常多，以下是一些常用的配置項：
  1. mode：指定打包模式，可以設定為 development、production 或 none。
  2. entry：指定打包入口檔案的路徑，可以是字元串、數組或對象形式。
  3. output：指定輸出檔案的路徑和名稱等資訊，例如設定 filename 和 path 等。
  4. module.rules：指定使用的 Loader，告訴 Webpack 在遇到特定檔案時需要使用哪些 Loader 進行轉換。
  5. plugins：指定使用的插件，例如 Html-webpack-plugin、Clean-webpack-plugin 等。
  6. resolve：用于指定子產品的解析方式，可以設定 alias、extensions 等選項。
  7. devServer：提供了一個開發伺服器，可以實作代碼修改後自動編譯和浏覽器熱更新等功能。
  8. optimization：用于設定代碼優化選項，例如壓縮代碼、去除重複代碼等。
  9. externals：在打包的過程中，指定哪些庫應該從外部引入，而不是被打包到代碼中。
  10. performance：用于配置打包性能優化選項，例如控制提示大小限制、記憶體等。
以上隻是常見的一些選項，具體配置項還要根據項目需求進行設定。

總的來說，Webpack 提供了非常靈活和豐富的配置選項，可根據不同需求對打包過程進行微調。

章節三：Webpack 的插件和加載器

Webpack 插件的作用和使用

Webpack 的插件可以用于完成更加靈活的操作，例如壓縮代碼、打包優化、生成 HTML 等。

Webpack 插件機制基于事件觸發，當事件回調成功執行之後，插件會被調用執行對應任務。

以下是幾個常用的插件及其作用：
  1. HtmlWebpackPlugin：用于自動生成 HTML 檔案，并将入口檔案和生成的 JavaScript 檔案自動關聯起來，生成的 HTML 檔案會自動添加 script 标簽引入 JavaScript 檔案。
  2. MiniCssExtractPlugin：用于将 CSS 檔案從 JavaScript 中提取出來，并合并成一個單獨的 CSS 檔案，減小 JavaScript 檔案的體積。
  3. UglifyJsPlugin：用于壓縮 JavaScript 檔案，去除注釋和空格等無用内容，減小檔案體積。
  4. CleanWebpackPlugin：用于删除打封包件夾中的檔案，便于下一次打包時重新生成檔案。

使用插件的方法也很簡單，在 webpack.config.js 中可以建立插件執行個體并在 plugins 中使用，示例如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'index.html',
      template: 'src/index.html',
    }),
    // ...
  ],
};

在這個示例中，我們使用了 HtmlWebpackPlugin，并在 plugins 中建立了一個新的 Html-webpack-plugin 執行個體。它通過指定 title、filename 和 template 等選項，自動建立一個新的 HTML 檔案，并自動引入打包輸出的 JavaScript 檔案。

同時，Webpack 也提供了許多其他的插件和 Loader，開發者可以按照自己的需要，引入和使用不同的插件。

Webpack 加載器的作用和使用

Webpack 加載器用于處理在 Webpack 中加載和轉換非 JavaScript 檔案為 JavaScript，例如将 ES6/7 轉換成 ES5、将 CSS 檔案轉換成 JavaScript 對象等。

Webpack 加載器允許你通過自定義轉換器的方式友善地将非 JavaScript 檔案轉換為 Webpack 可以了解的子產品。

以下是幾個常用的 Webpack 加載器以及它們的作用：
  1. babel-loader：用于将 ES6/7/8 轉換為 ES5 文法。需與 Babel 配合使用。
  2. css-loader：用于處理 CSS 檔案，将 CSS 轉化為 JavaScript 對象，并注入到 HTML 中。
  3. less-loader：用于将 Less 檔案轉換成 CSS，需要先安裝 Less。
  4. file-loader：用于将檔案和圖檔轉換成 base64 URL 或檔案的輸出路徑，再傳回一個包含該檔案 URL 的 JavaScript 子產品。
  5. url-loader：與 file-loader 類似，但是在檔案大小（機關 byte）低于指定的限制時，可以傳回源檔案的 base64 URL。當檔案大小超過限制時，使用 file-loader 将檔案輸出到指定的目錄。

使用加載器的方法也很簡單，在 webpack.config.js 中可以添加 module.rules 打包規則，示例如下：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

在這個示例中，我們建立了三個加載器：

  • babel-loader：用于處理 .js 檔案，将 ES6/7/8 文法轉換成 ES5 文法。
  • css-loader：用于處理 .css 檔案，将 CSS 檔案轉換成 JavaScript 對象，并注入到 HTML 中。
  • asset/resource：用于處理圖像檔案，将檔案轉換成 base64 URL 或輸出檔案的路徑，并傳回一個包含該檔案 URL 的 JavaScript 子產品。

在 module.rules 中，每個規則是一個包含 test、exclude、include 和 loader 等屬性的對象，其中 test 用于比對需要處理的檔案類型，loader 用于指定要使用的加載器。

Webpack 常用插件和加載器的介紹和示例

Webpack 提供了非常多的插件和加載器，以下簡單介紹幾個常見的插件和加載器并給出示例。

插件

HtmlWebpackPlugin

自動生成 HTML 檔案，并将 JavaScript 檔案自動插入其中。

安裝：

npm install --save-dev html-webpack-plugin

示例：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: 'src/index.html'
    })
  ]
};

MiniCssExtractPlugin

将 CSS 檔案提取為一個單獨的檔案，減小 JavaScript 檔案的體積。

安裝：

npm install --save-dev mini-css-extract-plugin

示例：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ]
};

CleanWebpackPlugin

用于清空之前生成的打封包件夾。

安裝：

npm install --save-dev clean-webpack-plugin

示例：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin()
  ]
};

加載器

babel-loader

用于将 ES6/7/8 轉換為 ES5 文法。

安裝：

npm install --save-dev babel-loader @babel/core @babel/preset-env

示例：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

css-loader

用于處理 CSS 檔案，将 CSS 轉化為 JavaScript 對象，并注入到 HTML 中。

安裝：

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

示例：

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

url-loader

與 file-loader 類似，但是在檔案大小（機關 byte）低于指定的限制時，可以傳回源檔案的 base64 URL。當檔案大小超過限制時，使用 file-loader 将檔案輸出到指定的目錄。

安裝：

npm install --save-dev url-loader

示例：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|gif|jpg|jpeg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 1024 * 10,
          },
        },
      },
    ]
  }
};

這個示例中，我們将圖檔檔案轉換為 base64 URL，但僅當檔案大小不超過 10KB 時才會執行轉換。當檔案大小超過 10KB 時，使用 file-loader 将檔案輸出到指定的目錄。通過設定傳遞給 type: 'asset'的選項，可以友善地控制如何轉換檔案。

章節四：Webpack 的優化和調試

Webpack 的優化技巧

Webpack 優化可以從以下幾個方面入手：
  1. 縮小打包體積，以加快網頁加載速度。
  2. 減少不必要的子產品和檔案的打包，以縮短打包時間。
  3. 使用合适的插件和工具，以簡化打包過程和優化打包結果。
以下是一些常見的Webpack 優化技巧：

1. Tree-shaking

Tree-shaking 是指通過消除 JavaScript 中沒有使用的代碼，來優化打包體積。Tree-shaking 通常用于優化 ES6 子產品引入，并依賴于 JavaScript 解析器的一些特性。

可以使用 Webpack 自帶的 UglifyJsPlugin 或 TerserPlugin 來壓縮和混淆代碼。

2. Code splitting

Code splitting 是指将一個大檔案分割成多個小檔案以提高加載速度。Webpack 支援多種方式實作 Code splitting，包括使用 splitChunks、import() 或動态 import() 等方式。

3. 按需加載

按需加載（lazy loading）是指當頁面需要使用某個子產品時，再進行加載。可以通過使用 import() 或動态 import() 來實作按需加載。

4. 懶加載和預加載

懶加載是指在初始化時隻加載必要的代碼，而将其餘代碼推遲到稍後進行加載。這樣可以大大減少初始的加載時間和資源消耗。預加載是指在該資源可能被需要前，提前加載該資源，以便下一步的使用。在 Webpack 中，可以使用 import() 或動态 import() 來實作懶加載和預加載。

5. 壓縮圖檔

壓縮圖檔可以減小圖檔的大小，降低加載時間和流量消耗。可以使用 Webpack 的 image-webpack-loader、url-loader 或 file-loader 等加載器和插件來進行圖檔壓縮。

6. 長緩存優化

為避免浏覽器在每次請求時都重新加載資源，可以添加長緩存辨別符來讓浏覽器緩存這些資源。可以使用 Webpack 的 output.filename 和 output.chunkFilename 來配置打包輸出的檔案名，并使用 hash、chunkhash、contenthash 等變量來區分不同版本的檔案。

7. 其他優化

  • 減少依賴子產品的數量
  • 使用緩存
  • 删除無用代碼
  • 縮短路徑引用

以上優化技巧可以結合實際需求進行采用。 Webpack 提供了很多優化工具和插件，可以針對具體項目進行配置。

Webpack 的調試技巧

對于開發過程中的 Webpack 應用程式調試，可以使用以下技巧：

1. 使用source-map

在 Webpack 中，使用 devtool 配置選項可以生成 source-map 檔案。這樣可以使打包後的代碼與原始代碼之間建立關聯，友善在浏覽器開發者工具中進行調試。

示例：

module.exports = {
  // ...
  devtool: 'source-map'
};

2. 配置devServer

使用 webpack-dev-server 可以提高開發效率，并友善進行調試。可以配置 devServer 來啟用開發伺服器，允許在本地測試應用程式并實作熱更新。

示例：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: 'src/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

devServer 配置選項可以指定開發伺服器的常用配置選項，例如指定伺服器内容存放目錄、熱更新開關等。在這個例子中，我們使用了 webpack-dev-server、HtmlWebpackPlugin 和 HotModuleReplacementPlugin，其中 HotModuleReplacementPlugin 用于啟用熱更新。

3. 使用webpack-bundle-analyzer

webpack-bundle-analyzer 是一個 Webpack 插件，可以将打包生成的檔案以可視化方式展示，檢視應用程式中包含的哪些子產品占用了大量空間，友善進行調試。

安裝：

npm install --save-dev webpack-bundle-analyzer

示例：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

在 Webpack 配置中添加 BundleAnalyzerPlugin 插件，然後運作 Webpack，會在浏覽器中打開一個頁面來展示可視化結果。

除了上述技巧，還可以使用 Chrome 開發者工具的調試工具和插件來進行調試。例如，使用 SourceMap 插件将打包後的源代碼映射到開發代碼中，同時使用 React Developer Tools 檢視 React 元件的工作原理等。

章節五：Webpack 和其他工具的結合

Webpack 和 Babel 的結合

Webpack 和 Babel 可以結合使用來處理用 ES6 / ES2015+ 編寫的 JavaScript 代碼，使其可以在現代浏覽器中運作。

Babel 是一個 JavaScript 編譯器，它支援将 ES6 / ES2015+ 轉換成 ES5 文法，用于在舊版浏覽器中運作。

Webpack 可以使用 Babel 加載器（babel-loader）來解析和編譯 JavaScript 代碼。通過使用 Webpack 和 Babel，可以使用 ES6 / ES2015+ 特性來編寫 JavaScript 代碼，并将其轉換為可以在所有浏覽器中運作的代碼。

以下是一個簡單的使用 Webpack 和 Babel 的例子： 
// webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: 'last 2 versions, ie >= 11'
              }]
            ]
          }
        }
      }
    ]
  }
};

在這個例子中，webpack.config.js 中使用了 Babel 加載器來解析和編譯 JavaScript 代碼。具體來說，當 Webpack 遇到 .js 檔案時，babel-loader 被應用于該檔案，用于将 ES6 / ES2015+ 轉換成 ES5 文法。在 options 中，我們配置了 Babel @babel/preset-env，并将目标浏覽器定為“最近的兩個版本和 IE11 及以上版本”。

需要注意的是，在使用 Babel 轉換代碼之前，需要先安裝 babel-loader 和相關的 Babel 插件和預設。此外，為了使用 Webpack，還需要在 webpack.config.js 檔案中進行相應的配置，例如設定入口和出口檔案、指定打包模式等。

當然，如果您使用的是 Create React App 這類的腳手架工具，他們可能已經提供了內建好了 Webpack 和 Babel 的配置，您隻需要簡單地添加相關的代碼即可進行使用。

Webpack 和 ESLint 的結合

Webpack 和 ESLint 可以結合使用來進行代碼風格檢查和文法檢查，幫助開發者保證代碼的品質和一緻性。

以下是一個簡單的使用 Webpack 和 ESLint 的例子： 
// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          'eslint-loader'
        ]
      }
    ]
  },
  // ...
};

在這個例子中，我們配置了 Webpack，在遇到 .js 檔案時，首先使用 Babel 加載器來将 ES6/ES2015+ 轉換成 ES5 文法，然後使用 ESLint 加載器來檢查代碼的文法和風格。可以通過簡單的配置來自定義 ESLint 的規則、運作方式等。

需要注意的是，在使用 ESLint 進行代碼檢查之前，需要先安裝 eslint 和相關的插件和配置檔案。此外，在 webpack.config.js 檔案中進行相應的配置，例如配置規則、忽略檔案等。

當然，如果您使用的是 Create React App 這類的腳手架工具，他們可能已經提供了內建好了 ESLint 的配置，您隻需要在 .eslintrc 檔案中将檢查規則配置為您需要的即可。

Webpack 和 React 的結合

Webpack 和 React 可以結合使用來建構 React 應用程式。

以下是一個簡單的使用 Webpack 和 React 的例子： 
// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html'
    })
  ]
};

在這個例子中，我們使用了 Webpack 來打包一個 React 應用程式。在 entry 配置中，指定了應用程式的入口檔案，即 src/index.jsx。在 output 配置中，指定了打包後的輸出檔案名和路徑。在 resolve 配置中，指定了可以省略的檔案擴充名，使得在引用子產品時可以省略字尾。

在 module 配置中，我們使用了 Babel 加載器來解析和編譯 JavaScript 代碼。在 plugins 配置中，使用了 HtmlWebpackPlugin 來生成 index.html 檔案，該檔案會自動将打包後的 JavaScript 檔案插入到 HTML 中。需要注意的是，在使用 Babel 轉換代碼之前，需要先安裝相關的插件和預設。

在 React 應用程式中，通常會使用元件來建構頁面。下面是一個簡單的 Hello World 元件的例子：

// src/components/HelloWorld.jsx

import React from 'react';

const HelloWorld = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
};

export default HelloWorld;

接下來，我們可以在一個入口檔案中将該元件渲染到頁面上：

// src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
  <HelloWorld name="Webpack" />,
  document.getElementById('root')
);

在這個例子中，我們在入口檔案中引入了 HelloWorld 元件，并使用 ReactDOM.render 方法将其渲染到頁面上。

最後，使用 npm start 指令可以啟動 Webpack，開發伺服器會自動啟動并監聽檔案變化，當對應的元件或者頁面代碼發生變化時，頁面會實時更新。

Webpack 和 Vue.js 的結合

Webpack 和 Vue.js 可以結合使用來建構 Vue.js 應用程式。

以下是一個簡單的使用 Webpack 和 Vue.js 的例子： 
// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.vue']
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html'
    }),
    new VueLoaderPlugin()
  ]
};

在這個例子中，我們使用了 Webpack 來打包一個 Vue.js 應用程式。在 entry 配置中，指定了應用程式的入口檔案，即 src/main.js。在 output 配置中，指定了打包後的輸出檔案名和路徑。在 resolve 配置中，指定了可以省略的檔案擴充名，使得在引用子產品時可以省略字尾。

在 module 配置中，我們使用了 Vue.js 和 Babel 加載器來解析和編譯 JavaScript 代碼和 Vue 元件。在 plugins 配置中，使用了 HtmlWebpackPlugin 來生成 index.html 檔案，并使用了 VueLoaderPlugin 來正确解析 Vue 元件。

在 Vue 應用程式中，我們通常會使用單檔案元件來建構頁面。下面是一個簡單的 Hello World 元件的例子：

<!-- src/components/HelloWorld.vue -->

<template>
  <div>
    <h1>Hello, {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    name: String
  }
};
</script>

接下來，我們可以在一個入口檔案中将該元件渲染到頁面上：

// src/main.js

import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';

new Vue({
  el: '#app',
  components: { HelloWorld },
  data: {
    name: 'Webpack'
  },
  template: '<HelloWorld :name="name" />'
});

在這個例子中，我們在入口檔案中引入了 HelloWorld 元件，并使用 Vue 執行個體将其渲染到頁面上。需要注意的是，在使用 Babel 轉換代碼之前，需要先安裝相關的插件和預設。

最後，使用 npm start 指令可以啟動 Webpack，開發伺服器會自動啟動并監聽檔案變化，當對應的元件或者頁面代碼發生變化時，頁面會實時更新。

章節六：Webpack 的實戰案例

Webpack 打包 React 應用程式

要将 React 應用程式打包成一個可部署的代碼包，可以使用 Webpack。

以下是一個簡單的使用 Webpack 打包 React 應用程式的例子：

首先需要安裝相關的依賴項：

npm install react react-dom
npm install babel-core babel-loader babel-preset-env babel-preset-react
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

接着，建立一個配置檔案 webpack.config.js，配置入口檔案、輸出檔案、加載器等資訊：

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

在這個例子中，我們指定了入口檔案為 src/index.js，輸出檔案為 dist/bundle.js。在 module 配置中，我們使用了 Babel 加載器來解析和編譯 React 元件及其依賴檔案。同時，我們也使用了 CSS 加載器來加載 CSS 檔案。在 plugins 配置中，使用了 HtmlWebpackPlugin 來生成 index.html 檔案，該檔案會自動将打包後的 JavaScript 檔案插入到 HTML 中。

接着，我們需要建立一個入口檔案 src/index.js，并在其中引入 React 元件并将其渲染到頁面上：

// src/index.js

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

ReactDOM.render(<App />, document.getElementById('root'));

在這個例子中，我們引入了 App 元件并使用 ReactDOM.render() 方法将其渲染到頁面上。需要注意的是，在運作應用程式之前，還需要在 HTML 檔案中添加一個與 ReactDOM.render() 方法中指定的 id 相比對的容器元素。

現在可以在終端運作 webpack 指令打包應用程式，打包後的檔案将輸出到 dist/bundle.js 檔案中。可以通過簡單的開發伺服器進行測試：

// package.json

{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  }
}

現在可以使用 npm start 指令來啟動開發伺服器，自動打開浏覽器并在其中運作應用程式。在修改代碼後，可以看到浏覽器會自動實時更新。如果需要打包則運作 npm run build 指令。

Webpack 打包 Vue.js 應用程式

要将 Vue.js 應用程式打包成一個可部署的代碼包，也可以使用 Webpack。

以下是一個簡單的使用 Webpack 打包 Vue.js 應用程式的例子：

首先需要安裝相關的依賴項：

npm install vue vue-template-compiler
npm install babel-core babel-loader babel-preset-env babel-plugin-transform-runtime
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader vue-style-loader css-loader less-loader less -D

接着，建立一個配置檔案 webpack.config.js，配置入口檔案、輸出檔案、加載器等資訊：

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['transform-runtime']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

在這個例子中，我們指定了入口檔案為 src/main.js，輸出檔案為 dist/bundle.js。同時，我們還使用了 Vue.js 相關的加載器，以及 Babel 加載器和 CSS 加載器進行編譯。在 plugins 配置中，使用了 VueLoaderPlugin 來正确解析 Vue 元件，并使用了 HtmlWebpackPlugin 來生成 index.html 檔案，該檔案會自動将打包後的 JavaScript 檔案插入到 HTML 中。

接着，我們需要建立一個入口檔案 src/main.js，并在其中建立一個 Vue 執行個體并挂載到頁面上：

// src/main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

在這個例子中，我們引入了 App 元件并建立了一個 Vue 執行個體，并使用 render 方法将其挂載到頁面上。

現在可以在終端運作 webpack 指令打包應用程式，打包後的檔案将輸出到 dist/bundle.js 檔案中。可以通過簡單的開發伺服器進行測試：

// package.json

{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  }
}

現在可以使用 npm start 指令來啟動開發伺服器，自動打開浏覽器并在其中運作應用程式。在修改代碼後，可以看到浏覽器會自動實時更新。如果需要打包則運作 npm run build 指令。

Webpack 打包多頁應用程式

Webpack 可以用來打包多頁應用程式。多頁應用程式與單頁應用程式不同，其由多個 HTML 頁面組成，每個頁面都有着自己獨立的 JavaScript 和 CSS 檔案。

以下是一個簡單的使用 Webpack 打包多頁應用程式的例子：

首先需要建立多個 HTML 頁面，并在其中引入對應的 JavaScript 和 CSS 檔案。例如，我們建立兩個頁面 home.html 和 about.html：

<!-- home.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Home Page</title>
  </head>
  <body>
    <h1>Welcome to the Home Page!</h1>
    <script src="home.js"></script>
  </body>
</html>
           
<!-- about.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>About Page</title>
  </head>
  <body>
    <h1>About Us</h1>
    <script src="about.js"></script>
  </body>
</html>

在這個例子中，我們分别建立了 home.html 和 about.html 兩個頁面，而每個頁面都包含一個對應的 JavaScript 檔案。

接着，建立一個配置檔案 webpack.config.js，配置入口檔案、輸出檔案、加載器等資訊：

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/home.html',
      filename: 'home.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      template: 'src/about.html',
      filename: 'about.html',
      chunks: ['about']
    })
  ]
};

在這個例子中，我們指定了入口檔案為兩個 JavaScript 檔案 home.js 和 about.js，輸出檔案為 dist/home.js 和 dist/about.js。在 module 配置中，我們使用了 Babel 加載器來解析和編譯 JavaScript 代碼。在 plugins 配置中，使用了 HtmlWebpackPlugin 來生成對應的 HTML 檔案，并且指定了對應的 JavaScript 檔案。

接着，建立兩個 JavaScript 檔案 home.js 和 about.js，并在其中編寫對應的腳本：

// home.js

console.log('This is the home page.');

           
// about.js

console.log('This is the about page.');

在這個例子中，我們分别在不同的 JavaScript 檔案中編寫對應的腳本。

現在可以在終端運作 webpack 指令打包應用程式，打包後的檔案将輸出到 dist 檔案夾中。可以通過簡單的開發伺服器進行測試：

// package.json

{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  }
}

現在可以使用 npm start 指令來啟動開發伺服器，自動打開浏覽器并在其中運作應用程式。在修改代碼後，可以看到浏覽器會自動實時更新。如果需要打包則運作 npm run build 指令。

Webpack 打包單頁應用程式

要将單頁應用程式打包成一個可部署的代碼包，可以使用 Webpack。以下是一個簡單的使用 Webpack 打包單頁應用程式的例子：

首先需要安裝相關的依賴項：

npm install react react-dom react-router-dom
npm install babel-core babel-loader babel-preset-env babel-preset-react
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

接着，建立一個配置檔案 webpack.config.js，配置入口檔案、輸出檔案、加載器等資訊：

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    historyApiFallback: true
  }
};

在這個例子中，我們指定了入口檔案為 src/index.js，輸出檔案為 dist/bundle.js。在 module 配置中，我們使用了 Babel 加載器來解析和編譯 React 元件及其依賴檔案。同時，我們也使用了 CSS 加載器來加載 CSS 檔案。在 plugins 配置中，使用了 HtmlWebpackPlugin 來生成 index.html 檔案，該檔案會自動将打包後的 JavaScript 檔案插入到 HTML 中。

其中，devServer 增加了 historyApiFallback 為 true ，這是因為嵌入到HTML頁面的SPA應用程式通常依賴于 HTML5 的 history 模式（如 React router），是以，需要将所有請求都指向 index.html，以防止路由錯誤。

接着，我們需要建立一個入口檔案 src/index.js，并在其中建立一個根元件并挂載到頁面上：

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';
import './index.css';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

在這個例子中，我們引入了 Home、About 和 NotFound 三個元件，并使用 BrowserRouter 以及 Route、Switch 元件來實作頁面路由。需要注意的是，在運作應用程式之前，還需要在 HTML 檔案中添加一個與 ReactDOM.render() 方法中指定的 id 相比對的容器元素。

現在可以在終端運作 webpack 指令打包應用程式，打包後的檔案将輸出到 dist/bundle.js 檔案中。

知識體系 相關配置 webpack 配置 pack
上一篇: 華碩天選X 2023評測：同配置成本效益拉滿
下一篇: pytest固件fixture不同層級作用域如何調用

繼續閱讀