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

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

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

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

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

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

• 手動(dòng)打包一個(gè)應(yīng)用程序
• 實(shí)時(shí)創(chuàng)建一個(gè)簡(jiǎn)單打包工具
• 一個(gè)簡(jiǎn)單打包工具的詳細(xì)說明

入口(entry)

入口起點(diǎn)(entry point) 指示 webpack 應(yīng)該使用哪個(gè)模塊，來作為構(gòu)建其內(nèi)部 依賴圖(dependency graph) 的開始。進(jìn)入入口起點(diǎn)后，webpack 會(huì)找出有哪些模塊和庫(kù)是入口起點(diǎn)（直接和間接）依賴的。

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

webpack.config.js

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

輸出(output)

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundle，以及如何命名這些文件。主要輸出文件的默認(rèn)值是 ?./dist/main.js?，其他生成文件默認(rèn)放置在 ?./dist? 文件夾中。

你可以通過在配置中指定一個(gè) ?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最上面導(dǎo)入的 path 模塊是什么，它是一個(gè) Node.js 核心模塊，用于操作文件路徑。

loader

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

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

1. ?test? 屬性，識(shí)別出哪些文件會(huì)被轉(zhuǎn)換。
2. ?use? 屬性，定義出在進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè) loader。

webpack.config.js

const path = require('path');

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

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

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

插件(plugin)

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

想要使用一個(gè)插件，你只需要 ?require()? 它，然后把它添加到 ?plugins? 數(shù)組中。多數(shù)插件可以通過選項(xiàng)(option)自定義。你也可以在一個(gè)配置文件中因?yàn)椴煌康亩啻问褂猛粋€(gè)插件，這時(shí)需要通過使用 ?new? 操作符來創(chuàng)建一個(gè)插件實(shí)例。

webpack.config.js

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

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

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

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

模式(mode)

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

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

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

瀏覽器兼容性(browser compatibility)

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

環(huán)境(environment)

Webpack 5 運(yùn)行于 Node.js v10.13.0+ 的版本。