## 前言 基于前面的入門文章，你對webpack的入口文件的概念應該比較清楚了，那么本文主要介紹一些entry配置細節。 ## 概念解釋  如上圖所示，在多個代碼模塊中會有一個起始的 .js 文件，這個便是 webpack 構建的入口。webpack 會讀取這個文件，并從它開始解析依賴，然后進行打包。如圖，一開始我們使用 webpack 構建時，默認的入口文件就是 ./src/index.js。 我們常見的項目中，如果是單頁面應用，那么可能入口只有一個；如果是多個頁面的項目，那么經常是一個頁面會對應一個構建入口。 入口可以使用 entry 字段來進行配置，webpack 支持配置多個入口來進行構建。 ## 不同寫法場景 ~~~ //單文件入口 module.exports = { entry: './src/index.js' } // 上述配置等同于 module.exports = { entry: { main: './src/index.js' } } //支持對象語法 module.exports = { entry: { app: './src/app.js', vendors: './src/vendors.js' } }; // 或者配置多個入口 module.exports = { entry: { foo: './src/page-foo.js', bar: './src/page-bar.js', // ... } } // 使用數組來對多個文件進行打包，多個文件作為一個入口，webpack 會解析兩個文件的依賴后進行打包 module.exports = { entry: { main: [ './src/foo.js', './src/bar.js' ] } } ~~~ ## 實際方案 ### 單文件以及供應商 主要適用于有些第三方的文件不用雜糅到入口文件，分別進行依賴打包。 ~~~ const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' } }; ~~~ ### 多頁應用入口方案設計 這個方案主要是針對多頁應用的設計，我們可以針對多頁分別設計自己的入口，除了更加清晰之外，講為不同的入口文件提供不同的頁面模板，有利于更好的提取公共文件，對于其他頁面沒有必要的文件不用加載。在入口點之間重復使用大量代碼/模塊的多頁面應用程序可以大大受益于這些技術。 ~~~ const config = { entry: { pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', pageThree: './src/pageThree/index.js' } }; ~~~ 備注：作為經驗法則：一個頁面最好只用一個入口文件的js ## 參考文檔 - 掘金小冊《使用 webpack 定制前端開發環境》 - [webpack官網介紹](https://webpack.js.org/concepts/entry-points/)