Webpack 入口起點(entry points)

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

單個入口（簡寫）語法

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

webpack.config.js

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

?entry? 屬性的單個入口語法，是以下形式的簡寫：

webpack.config.js

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

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

webpack.config.js

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

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

對象語法

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

webpack.config.js

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

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

描述入口的對象

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

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

webpack.config.js

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

?runtime? 和 ?dependOn? 不應(yīng)在同一個入口上同時使用，所以如下配置無效，并且會拋出錯誤：

webpack.config.js

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

確保 ?runtime? 不能指向已存在的入口名稱，例如下面配置會拋出一個錯誤：

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

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

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

常見場景

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

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

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 個單獨的入口點（例如上面的示例）。

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

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

webpack.config.js

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

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

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