webpack 多入口打包分析

[文章最後都是老夫精挑細選的乾貨哦~]

1 為什麼需要多入口打包？（或者說什麼時候需要多入口打包？）

先從但入口打包說起，單入口也就是常見的單頁面應用，就是任何使用者想訪問我這個** 必須且通過這乙個唯一的入口

比如我們開發了乙個 外賣**， => 10.79.64.4：8080/index.html, 主頁

有很多吃的種類，比如

東北菜 10.79.64.4：8080/dongbei/

湖南菜 10.79.64.4：8080/fulan/

廣東菜 10.79.64.4：8080/guangdong/

比如你就愛吃東北菜，那麼你訪問**的方式有兩種

此處說一下單頁面打包後生成的檔案正常是三個js檔案( 這是在你沒有使用非同步元件載入的情況，也就是沒有使用require.ensure)

main.js //此時三個菜系頁面是一起到打包到這裡的

vendor.js

commontrunk.js

（此時主頁index.html script 載入的是main.js，vendor，commontrunk這三個檔案）

如果你使用了非同步元件，打包出來的是,比如你將三個菜系頁面用非同步載入

main.js

vendor.js

commontrunk.js

dongbeicai.js //東北菜

hunancai.js//湖南菜

guangdongcai.js//廣東菜

（此時主頁index.html script 載入的是main.js，vendor，commontrunk這三個檔案）

以上是正常的單頁**的情況，東北菜湖南菜廣東菜，是我們**的三個子系統

那麼如果我們的子系統過於複雜呢？

比如我們** 分為 地球菜 和 火星菜

地球菜，有 美國菜 中國 菜，

中國菜才是東北菜 湖南菜。。

當然我想你仍然是可以把這些寫成乙個單頁，所有子系統都用非同步元件載入，這樣的危害就是當每個子系統都足夠複雜適合，還混合在一起寫 就會更複雜和混亂

那麼多頁應用來了 我們的**程式設計了

地球菜 10.79.64.4：8080/diqiu/index.html

火星菜 10.79.64.4：8080/huoxing/index.html

看出區別來了嗎 區別就是 我們每個子系統都有了自己的入口，可以直接作為根節點存在，而不是要一直依賴於上層父頁面，

好下面說一下 前端如何實現

1 修改webpack config 的 entry,改成多個，

2 修改webpack config 的 外掛程式htmlwebpackplugin，有幾個入口就要生成幾個index.html頁面

3 打包原則可以參考

4自己的疑惑

1看到別人的專案 頁面所有的通過路由去訪問的元件 都用的非同步元件，是否有必要？是否需要區分一下 元件大小？因為多個非同步元件意味著多次請求

公共**抽取之manifest.js 相關

參考

參考 參考

參考

參考

參考

參考

webpack 多入口配置

順著官網的操作，我們可以本地測試起我們的專案 npm run dev,首先我們要理解webpack打包主要是針對js，檢視下面生成的配置，首頁是index.html，模版用的index.html，入口檔案用的mian.js file build webpack.base.conf.js entry ...

webpack多頁面打包

在src下新建多個js檔案和html模板 在entry裡配置多個入口檔案 entry htmlwebpackplugin裡配置不同的html頁面引用不同的js檔案 const plugins new htmlwebpackplugin new htmlwebpackplugin 但是每次在 entr...

實習隨筆 3 webpack多入口多出口打包

通過webpack將專案的乙個檔案目錄下的js按照其父目錄進行區分打包 大概情況 可以使用webpack多入口多出口來實現 技術難點1 獲取到pages下面的資料夾的js檔案 解決方法 引入node 的glob模組，這乙個模組可以幫我們獲取想要的js檔案 具體使用方法 參考 技術難點2 輸出到跟其父...