概念

webpack 的核心是一個靜態模組打包器，適用於現代 JavaScript 應用程式。當 webpack 處理您的應用程式時，它會從一個或多個進入點內部建立一個相依性圖表，然後將您的專案所需的所有模組合併成一個或多個套件，這些套件是提供您內容的靜態資源。

從 4.0.0 版開始，webpack 不再需要設定檔來打包您的專案。儘管如此，它可以高度設定以更符合您的需求。

要開始使用，您只需要瞭解其核心概念

輸入
輸出
載入器
外掛
模式
瀏覽器相容性

這份文件旨在提供這些概念的高階概觀，同時提供連結到詳細概念特定使用案例。

若要更深入瞭解模組打包器的背後概念及其運作方式，請參閱這些資源

進入

進入點指出 webpack 應使用哪個模組來開始建置其內部相依圖。Webpack 將找出進入點所依賴的其他模組和函式庫（直接和間接）。

其預設值為 ./src/index.js，但您可以在 webpack 組態中設定entry 屬性來指定不同的（或多個）進入點。例如

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

輸出

輸出屬性會告訴 webpack 在何處發出其建立的套件以及如何命名這些檔案。其預設值為主要輸出檔案的 ./dist/main.js，以及任何其他產生檔案的 ./dist 資料夾。

您可以在組態中指定 output 欄位來組態處理程序的這個部分

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

在上述範例中，我們使用 output.filename 和 output.path 屬性來告訴 webpack 我們的套件名稱以及我們希望它發出的位置。如果您想知道頂端匯入的 path 模組，它是一個核心Node.js 模組，用於處理檔案路徑。

載入器

開箱即用，webpack 僅理解 JavaScript 和 JSON 檔案。載入器允許 webpack 處理其他類型的檔案，並將它們轉換成有效的模組，您的應用程式可以使用並新增到相依圖中。

在高階層面上，載入器在您的 webpack 設定中有兩個屬性

test 屬性識別應轉換哪個檔案或檔案。
use 屬性指出應使用哪個載入器來執行轉換。

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

上述設定已為單一模組定義一個 rules 屬性，其中包含兩個必要屬性：test 和 use。這會告訴 webpack 編譯器以下內容

「嘿，webpack 編譯器，當您在 require()/import 陳述式中遇到解析為 '.txt' 檔案的路徑時，請使用 raw-loader 在將其新增到套件之前轉換它。」

您可以在載入器區段中包含載入器時查看進一步的自訂。

外掛程式

雖然載入器用於轉換特定類型的模組，但外掛程式可用於執行更廣泛的任務，例如套件最佳化、資產管理和環境變數注入。

若要使用外掛程式，您需要require()它並將它新增至plugins陣列。大多數外掛程式可透過選項進行自訂。由於您可以在組態中多次使用外掛程式以達成不同目的，因此您需要透過使用new運算子呼叫它來建立它的執行個體。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

在上述範例中，html-webpack-plugin會為您的應用程式產生一個 HTML 檔案，並自動將您產生所有的套件注入至這個檔案中。

在您的 webpack 組態中使用外掛程式很簡單。不過，有許多值得進一步探討的用例。在此處深入了解它們。

模式

透過將mode參數設定為development、production或none，您可以啟用 webpack 內建的最佳化，這些最佳化與每個環境相符。預設值為production。

module.exports = {
  mode: 'production',
};

在此處深入了解模式組態以及每個值會進行哪些最佳化。

瀏覽器相容性

Webpack 支援所有符合ES5的瀏覽器（不支援 IE8 及以下版本）。Webpack 需要Promise才能使用import()和require.ensure()。如果您想要支援較舊的瀏覽器，您需要在使用這些表達式之前載入 polyfill。

環境

Webpack 5 在 Node.js 版本 10.13.0+ 上執行。

編輯此頁面·列印此頁面

進入點

概念

進入

輸出

載入器

外掛程式

模式

瀏覽器相容性

環境

18 貢獻者