webpack:source-map

本文从构建后代码，到浏览器为什么可以看到源码映射来讨论，不研究构建部分。

• 源码的目录树怎么生成的，在构建后代码的哪里有体现？
• 源码的代码部分有构建后代码的哪里提供的？
• 构建后代码和源码的位置映射关系维护在哪里？
• 下面通过webpack的几种配置来见分晓。

source-map技术

• 这个是浏览器技术，用于代码位置的映射，也就是需要浏览器支持

webpack之souce-map配置和原理分析

• eval

// 配置
devtool: 'eval',
复制代码

// 源码
// config.js
__webpack_public_path__ = window.path + '/';

// 效果
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
eval("__webpack_require__.p = window.path + '/';\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/views/config.js\n// module id = 3\n// module chunks = 0\n\n//# sourceURL=webpack:///./src/views/config.js?");
/***/ }),
复制代码

1. 通过eval把构建后代码的部分(和源码一一对应的)形成source-map；而不是整个dist文件
2. eval中的代码是构建后的代码，只是在eval中执行，形成source-map的一个环境
3. 浏览器根据sourceURL形成一个目录树，内容就是eval中的代码
4. eval特点：有最好的性能，但是它只映射到每个模块源码文件，没有行列信息
5. 总结：
6. 只是提供了sourceURL(生成源码目录树)、没有源码代码

• source-map

// 配置
devtool: 'source-map',
复制代码

// 效果，会生成.map文件
// 下面来分析.map
{
    version:3 // 版本号
    sources:[] // 源码目录树
    names:[] //
    mappings:'' // 位置映射
    files:'' // 构建后代码位置
    sourcesContent:[] // 打包后的代码的源码翻译（理解：也即是构建后的代码，如果该部分代码有对应的源码，则会替换成源码，负责显示源码）
}
复制代码

1. souce-map配置，会生产.map文件
2. .map文件包含目录树(sources)、构建后代码的源码解析(sourceContent)、位置映射(mappings)
3. 总结：
4. 能生成源码的目录树（sources）、及源码的代码（sourceContent、mappings），具有完整的映射信息

• inline-source-map

// 配置
devtool: 'inline-source-map',
复制代码

1. 效果和source-map一样
2. 相对于source-map,inline-source-map就和其名字一样好理解，就是内联的，通过base放在构建代码的最后面，而没有独立生成.map文件

• eval-source-map

// 配置
devtool: 'eval-source-map',
复制代码

// 效果
eval("__webpack_require__.p = window.path + '/';//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvdmlld3MvY29uZmlnLmpzPzZlNDQiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEscUJBQXVCIiwiZmlsZSI6IjMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJfX3dlYnBhY2tfcHVibGljX3BhdGhfXyA9IHdpbmRvdy5wYXRoICsgJy8nO1xuXG5cbi8vLy8vLy8vLy8vLy8vLy8vL1xuLy8gV0VCUEFDSyBGT09URVJcbi8vIC4vc3JjL3ZpZXdzL2NvbmZpZy5qc1xuLy8gbW9kdWxlIGlkID0gM1xuLy8gbW9kdWxlIGNodW5rcyA9IDAiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///3\n");

// 对比eval发现，不仅有sourceURL、而且多了sourceMappingURL
复制代码

1. sourceURL=webpack-internal 会生成目录结构，这里的结构为以构建后代码的module为纬度来的=>支持模块缓存
2. sourceMappingURL。会生成完整信息的源码目录树和代码

• cheap-source-map

和source-map对比下来，.map文件中没有name属性，也即是缺少部分功能：不包含 loader 的 sourcemap
复制代码

总结：我觉得基本可以分为两种模式

• 只生成源码的目录树

代表：eval
关键词：sourceURL
复制代码

• 生成源码的目录树、及源码代码（及映射）

代码：source-map
关键词：sourceMappingURL / .map
复制代码