原创力文档- 1、本文档共23页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
模块化原理-source-map
王红元coderwhy
目录
1webpack配置回顾
content
2webpack的mode
3webpack模块化原理
4认识source-map
5source-map解析
6source-map常见值
coderwhyWebpack到底是什么呢？
◼我们先来看一下官方的解释：
webpackisastaticmodulebundlerformodernJavaScriptapplications.
◼webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；
◼我们来对上面的解释进行拆解：
打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
模块化module：webpack默认支持各种模块化开发，ESModule、CommonJS、AMD等；
现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；
◼前端我们已经学习了webpack的基础知识，这里我简单做一个回顾。
coderwhyWebpack官方的图片
coderwhywebpack基本打包回顾
coderwhyMode配置
◼Mode配置选项，可以告知webpack使用相应模式的内置优化：
默认值是production（什么都不设置的情况下）；
可选值有：none|development|production；
◼这几个选项有什么样的区别呢?
coderwhyMode配置代表更多
coderwhyWebpack的模块化
◼Webpack打包的代码，允许我们使用各种各样的模块化，但是最常用的是CommonJS、ESModule。
那么它是如何帮助我们实现了代码中支持模块化呢？
◼我们来研究一下它的原理，包括如下原理：
CommonJS模块化实现原理；
ESModule实现原理；
CommonJS加载ESModule的原理；
ESModule加载CommonJS的原理；
◼这里不再给出代码，查看课堂代码的注释解析；
coderwhy认识source-map
◼我们的代码通常运行在浏览器上时，是通过打包压缩的：
也就是真实跑在浏览器上的代码，和我们编写的代码其实是有差异的；
比如ES6的代码可能被转换成ES5；
比如对应的代码行号、列号在经过编译后肯定会不一致；
比如代码进行丑化压缩时，会将编码名称等修改；
比如我们使用了TypeScript等方式编写的代码，最终转换成JavaScript；
◼但是，当代码报错需要调试时（debug），调试转换后的代码是很困难的
◼但是我们能保证代码不出错吗？不可能。
◼那么如何可以调试这种转换后不一致的代码呢？答案就是source-map
source-map是从已转换的代码，映射到原始的源文件；
使浏览器可以重构原始源并在调试器中显示重建的原始源；
coderwhy如何使用source-map
◼如何可以使用source-map呢？两个步骤：
第一步：根据源文件，生成source-map文件，webpack在打包时，可以通过配置生成source-map；
第二步：在转换后的代码，最后添加一个注释，它指向sourcemap；
文档评论（0）