Webpack 入口起點(diǎn)(entry points)

在 webpack 配置中有多種方式定義 ?entry? 屬性。除了解釋為什么它可能非常有用，我們還將向你展示如何去配置 ?entry? 屬性。

單個(gè)入口（簡(jiǎn)寫）語(yǔ)法

用法：?entry: string | [string]?

webpack.config.js

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

?entry? 屬性的單個(gè)入口語(yǔ)法，是以下形式的簡(jiǎn)寫：

webpack.config.js

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

我們也可以將一個(gè)文件路徑數(shù)組傳遞給 ?entry? 屬性，這將創(chuàng)建一個(gè)所謂的 "multi-main entry"。在你想要一次注入多個(gè)依賴文件，并且將它們的依賴關(guān)系繪制在一個(gè) "chunk" 中時(shí)，這種方式就很有用。

webpack.config.js

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

當(dāng)你希望通過一個(gè)入口（例如一個(gè)庫(kù)）為應(yīng)用程序或工具快速設(shè)置 webpack 配置時(shí)，單一入口的語(yǔ)法方式是不錯(cuò)的選擇。然而，使用這種語(yǔ)法方式來擴(kuò)展或調(diào)整配置的靈活性不大。

對(duì)象語(yǔ)法

用法：?entry: { <entryChunkName> string | [string] } | {}?

webpack.config.js

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

對(duì)象語(yǔ)法會(huì)比較繁瑣。然而，這是應(yīng)用程序中定義入口的最可擴(kuò)展的方式。

描述入口的對(duì)象

用于描述入口的對(duì)象。你可以使用如下屬性：

• ?dependOn?: 當(dāng)前入口所依賴的入口。它們必須在該入口被加載前被加載。
• ?filename?: 指定要輸出的文件名稱。
• ?import?: 啟動(dòng)時(shí)需加載的模塊。
• ?library?: 指定 library 選項(xiàng)，為當(dāng)前 entry 構(gòu)建一個(gè) library。
• ?runtime?: 運(yùn)行時(shí) chunk 的名字。如果設(shè)置了，就會(huì)創(chuàng)建一個(gè)新的運(yùn)行時(shí) chunk。在 webpack 5.43.0 之后可將其設(shè)為 ?false? 以避免一個(gè)新的運(yùn)行時(shí) chunk。
• ?publicPath?: 當(dāng)該入口的輸出文件在瀏覽器中被引用時(shí)，為它們指定一個(gè)公共 URL 地址。

webpack.config.js

module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

?runtime? 和 ?dependOn? 不應(yīng)在同一個(gè)入口上同時(shí)使用，所以如下配置無(wú)效，并且會(huì)拋出錯(cuò)誤：

webpack.config.js

module.exports = {
  entry: {
    a2: './a',
    b2: {
      runtime: 'x2',
      dependOn: 'a2',
      import: './b',
    },
  },
};

確保 ?runtime? 不能指向已存在的入口名稱，例如下面配置會(huì)拋出一個(gè)錯(cuò)誤：

module.exports = {
  entry: {
    a1: './a',
    b1: {
      runtime: 'a1',
      import: './b',
    },
  },
};

另外 ?dependOn? 不能是循環(huán)引用的，下面的例子也會(huì)出現(xiàn)錯(cuò)誤：

module.exports = {
  entry: {
    a3: {
      import: './a',
      dependOn: 'b3',
    },
    b3: {
      import: './b',
      dependOn: 'a3',
    },
  },
};

常見場(chǎng)景

以下列出一些入口配置和它們的實(shí)際用例：

分離 app(應(yīng)用程序) 和 vendor(第三方庫(kù)) 入口

webpack.config.js

module.exports = {
  entry: {
    main: './src/app.js',
    vendor: './src/vendor.js',
  },
};

webpack.prod.js

module.exports = {
  output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

webpack.dev.js

module.exports = {
  output: {
    filename: '[name].bundle.js',
  },
};

這是什么？ 這是告訴 webpack 我們想要配置 2 個(gè)單獨(dú)的入口點(diǎn)（例如上面的示例）。

為什么？ 這樣你就可以在 vendor.js 中存入未做修改的必要 library 或文件（例如 Bootstrap, jQuery, 圖片等），然后將它們打包在一起成為單獨(dú)的 chunk。內(nèi)容哈希保持不變，這使瀏覽器可以獨(dú)立地緩存它們，從而減少了加載時(shí)間。

多頁(yè)面應(yīng)用程序

webpack.config.js

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js',
  },
};

這是什么？ 我們告訴 webpack 需要三個(gè)獨(dú)立分離的依賴圖（如上面的示例）。

為什么？ 在多頁(yè)面應(yīng)用程序中，server 會(huì)拉取一個(gè)新的 HTML 文檔給你的客戶端。頁(yè)面重新加載此新文檔，并且資源被重新下載。然而，這給了我們特殊的機(jī)會(huì)去做很多事，例如使用 ?optimization.splitChunks? 為頁(yè)面間共享的應(yīng)用程序代碼創(chuàng)建 bundle。由于入口起點(diǎn)數(shù)量的增多，多頁(yè)應(yīng)用能夠復(fù)用多個(gè)入口起點(diǎn)之間的大量代碼/模塊，從而可以極大地從這些技術(shù)中受益。