>[success] # webpack 打包后文件代碼 ~~~ 1.做的是簡單思路推到，也可以直接參考 'https://segmentfault.com/a/1190000022669224?utm_source=tag-newest' 'https://www.cnblogs.com/QH-Jimmy/p/8018965.html' ~~~ >[info] ## 項目結構分析推到 ~~~ 1.疑問1，在用webpack 編寫代碼的時候，我們用了import導入文件,導入相同功能代碼時候，webpack 會如何處理保證讓其共享導入的模塊 2.疑問2，使用的是esm 在編寫代碼，webpack是通過什么樣的方式讓代碼變成了非'esm'的形式 上面兩個疑問是影響我最深的兩個問題，帶著這兩個疑問來看一下'webpack' 打包文件 3.上面的問題解答 ，我解釋的不一定是正確的，是基于目前我所會的知識所整理的 ~~~ >[danger] ##### 創建一個項目目錄 ~~~js ├─ dist │ ├─ bunld.js │ └─ index.html ├─ src │ ├─ hellowWebpack.js │ ├─ index.js │ └─ test.js ├─ package-lock.json ├─ package.json ├─ webpack.config.js └─ yarn.lock ~~~ ~~~ // hellowWebpack.js export default () => { const element = document.createElement('h2') element.textContent = 'Hello world' element.addEventListener('click', () => { alert('Hello webpack') }) return element } // index.js import createHeading from './hellowWebpack' import './test' const heading = createHeading() document.body.appendChild(heading) // test.js import createHeading from './hellowWebpack' const heading = createHeading() console.log(heading) ~~~ >[danger] ##### 打包后文件分析 ~~~ 1.注意4.x 和 5.x 打包出來后的效果是不一樣的，但是整體流程理解還是差不多 2.根據打包后結果可以知道第一個疑問的答案是會共有的，因為將模塊都保存在一個數組中 只需要復用對應腳標下的模塊即可 2.疑問2，webpack 找到這些esm依賴關系將他們進行解析存儲，變成了調用 __webpack_require__() 函數 調用模塊加載 ~~~