前言

本質上，webpack 是一個用于現(xiàn)代 JavaScript 應用程序的 靜態(tài)模塊打包工具。當 webpack 處理應用程序時，它會在內部從一個或多個入口點構建一個 依賴圖(dependency graph)，然后將你項目中所需的每一個模塊組合成一個或多個 bundles，它們均為靜態(tài)資源，用于展示你的內容。

從 v4.0.0 開始，webpack 可以不用再引入一個配置文件來打包項目，然而，它仍然有著 高度可配置性，可以很好滿足你的需求。

在開始前你需要先理解一些核心概念：

• 入口(entry)
• 輸出(output)
• loader
• 插件(plugin)
• 模式(mode)
• 瀏覽器兼容性(browser compatibility)
• 環(huán)境(environment)

本文檔旨在給出這些概念的高度概述，同時提供具體概念的詳盡相關用例的鏈接。

為了更好地理解模塊打包工具背后的理念，以及在底層它們是如何運作的，請參考以下資源：

• 手動打包一個應用程序
• 實時創(chuàng)建一個簡單打包工具
• 一個簡單打包工具的詳細說明

入口(entry)

入口起點(entry point) 指示 webpack 應該使用哪個模塊，來作為構建其內部 依賴圖(dependency graph) 的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

默認值是 ?./src/index.js?，但你可以通過在 webpack configuration 中配置 entry 屬性，來指定一個（或多個）不同的入口起點。例如：

webpack.config.js

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

輸出(output)

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundle，以及如何命名這些文件。主要輸出文件的默認值是 ?./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 bundle 的名稱，以及我們想要 bundle 生成(emit)到哪里?？赡苣阆胍私庠诖a最上面導入的 path 模塊是什么，它是一個 Node.js 核心模塊，用于操作文件路徑。

loader

webpack 只能理解 JavaScript 和 JSON 文件，這是 webpack 開箱可用的自帶能力。loader 讓 webpack 能夠去處理其他類型的文件，并將它們轉換為有效 模塊，以供應用程序使用，以及被添加到依賴圖中。

在更高層面，在 webpack 的配置中，loader 有兩個屬性：

1. ?test? 屬性，識別出哪些文件會被轉換。
2. ?use? 屬性，定義出在進行轉換時，應該使用哪個 loader。

webpack.config.js

const path = require('path');

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

以上配置中，對一個單獨的 module 對象定義了 ?rules? 屬性，里面包含兩個必須屬性：?test? 和 ?use?。這告訴 webpack 編譯器(compiler) 如下信息：

“當你碰到「在 require()/import 語句中被解析為 '.txt' 的路徑」時，在你對它打包之前，先 use(使用) raw-loader 轉換一下?！?/p>

插件(plugin)

loader 用于轉換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務。包括：打包優(yōu)化，資源管理，注入環(huán)境變量。

想要使用一個插件，你只需要 ?require()? 它，然后把它添加到 ?plugins? 數(shù)組中。多數(shù)插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 ?new? 操作符來創(chuàng)建一個插件實例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于訪問內置插件

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

在上面的示例中，?html-webpack-plugin? 為應用程序生成一個 HTML 文件，并自動將生成的所有 bundle 注入到此文件中。

在 webpack 配置中使用插件是簡單直接的。然而，也有很多值得我們進一步探討的用例。

模式(mode)

通過選擇 ?development?, ?production? 或 ?none? 之中的一個，來設置 ?mode? 參數(shù)，你可以啟用 webpack 內置在相應環(huán)境下的優(yōu)化。其默認值為 ?production?。

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

想要了解更多，請查閱 mode 配置，這里有具體每個值相應的優(yōu)化行為。

瀏覽器兼容性(browser compatibility)

Webpack 支持所有符合 ES5 標準 的瀏覽器（不支持 IE8 及以下版本）。webpack 的 ?import()? 和 ?require.ensure()? 需要 ?Promise?。如果你想要支持舊版本瀏覽器，在使用這些表達式之前，還需要提前加載 polyfill。

環(huán)境(environment)

Webpack 5 運行于 Node.js v10.13.0+ 的版本。