>[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__() 函数 调用模块加载 ~~~