https://zhuanlan.zhihu.com/p/139492167
上周吃飯時，大家聊到一個問題。比如我的項目trade，依賴了A@1.0.0版本。 然后我又引入了B，而B依賴A@2.0.0版本，這時候會產生沖突嗎？
都知道不會有沖突，因為這種場景太常見了。不過具體是如何做到的，並沒有去了解過。
今天正好有空，就寫了個demo看看
首先建立好項目trade，然后安裝 A@1.0.0，執行npm ls -depth=1
trade
└─ A@1.0.0然后弄個npm包B，讓它依賴A@2.0.0，項目trade安裝B之后，執行npm ls -depth=1
trade
├─ A@1.0.0
└┬ B
└─ A@2.0.0到這里，node_modules中包的下載安裝部分，就很清楚的知道了多版本存放的策略。
然后就是項目構建時，webpack生成bundle，打包的策略了。
webpack基本流程就是找到代碼中各種模塊引入語句（require()、import、url()等），然后確定模塊依賴關系，最后把模塊打包到一起去。
這里，會想說，項目trade中，引入A模塊的代碼是
// trade項目 import 'A' // 1.0.0版本的A 模塊B中，引入A模塊的代碼，也是
// 模塊B import 'A' // 2.0.0版本的A 那么，這兩個A，webpack是怎么知道具體打包哪個版本，不會搞錯呢。
通過看打包好的代碼和文檔，發現是這么做的
首先對於這種直接書寫模塊名的引用，webpack查找模塊的方式和node一致，都是先找當前目錄的node_modules中是否有這個模塊，然后再找上一級目錄的node_modules，一直找到根目錄。這么做，就能保證webpack能順利找到模塊了。
然后是模塊打包的過程，雖然在我們寫代碼時，import的模塊都叫做A，但是webpack內部，是把模塊的路徑當做模塊的id標識來區分的，所以就不會找錯了
// webpack模塊的管理 { "./node_modules/A/index.min.js": function() {}, "./node_modules/B/node_modules/A/index.min.js": function() {} )