时间:2021-05-18
我们先来看看文档对这 7 种模式的解释:
模式 解释 eval 每个module会封装到 eval 里包裹起来执行,并且会在末尾追加注释//@ sourceURL. source-map 生成一个SourceMap文件. hidden-source-map 和 source-map 一样,但不会在 bundle 末尾追加注释. inline-source-map 生成一个DataUrl形式的 SourceMap 文件. eval-source-map 每个module会通过eval()来执行,并且生成一个DataUrl形式的SourceMap. cheap-source-map 生成一个没有列信息(column-mappings)的SourceMaps文件,不包含loader的 sourcemap(譬如 babel 的 sourcemap) cheap-module-source-map 生成一个没有列信息(column-mappings)的SourceMaps文件,同时 loader 的 sourcemap 也被简化为只包含对应行的。
注1:
webpack不仅支持这 7 种,而且它们还是可以任意组合上面的eval、inline、hidden关键字,就如文档所说,你可以设置 souremap 选项为 cheap-module-inline-source-map。
注2:
如果你的modules里面已经包含了SourceMaps,你需要用source-map-loader来和合并生成一个新的 SourceMaps。
使用结果有何不同
下面我们将列出这 7 种模式打包编译后的结果,从中看看他们的异同:
eval
webpackJsonp([1],[ function(module,exports,__webpack_require__){ eval( ... //# sourceURL=webpack:///./src/js/index.js?' ) }, function(module,exports,__webpack_require__){ eval( ... //# sourceURL=webpack:///./src/static/css/app.less?./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/1.1.1/postcss-loader!./~/.npminstall/less-loader/2.2.3/less-loader' ) }, function(module,exports,__webpack_require__){ eval( ... //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?" ) },...])eval 模式会把每个 module 封装到eval 里包裹起来执行,并且会在末尾追加注释。
Each module is executed withevaland//@ sourceURL.
source-map
webpackJsonp([1],[ function(e,t,i){...}, function(e,t,i){...}, function(e,t,i){...}, function(e,t,i){...}, ...])//# sourceMappingURL=index.js.map与此同时,你会发现你的 output 目录下多了一个index.js.map文件。
我们可以把这个 index.js.map 格式化一下,方便我们在下文的观察比较:
{ "version":3, "sources":[ "webpack:///js/index.js","webpack:///./src/js/index.js", "webpack:///./~/.npminstall/css-loader/0.23.1/css-loader/lib/css-base.js", ...], "names":["webpackJsonp","module","exports"...], "mappings":"AAAAA,cAAc,IAER,SAASC...", "file":"js/index.js", "sourcesContent":[...], "sourceRoot":""}关于 sourceMap 行列信息如何映射源代码的详解,此处不是我们要重点讨论的话题,从略。
hidden-source-map
webpackJsonp([1],[ function(e,t,i){...}, function(e,t,i){...}, function(e,t,i){...}, function(e,t,i){...}, ...])与 source-map 相比少了末尾注释,
但 output 目录下的 index.js.map 没有少
inline-source-map
webpackJsonp([1],[ function(e,t,i){...}, function(e,t,i){...}, function(e,t,i){...}, function(e,t,i){...}, ...])//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9...可以看到末尾的注释 sourceMap 作为DataURL的形式被内嵌进了 bundle中,由于 sourceMap 的所有信息都被加到了bundle中,整个 bundle 文件变得硕大无比。
eval-source-map
webpackJsonp([1],[ function(module,exports,__webpack_require__){ eval( ... //# sourceMappingURL=data:application/json;charset=utf-8;base64,... ) }, function(module,exports,__webpack_require__){ eval( ... //# sourceMappingURL=data:application/json;charset=utf-8;base64,... ) }, function(module,exports,__webpack_require__){ eval( ... //# sourceMappingURL=data:application/json;charset=utf-8;base64,... ) }, ...]);和 eval 类似,但是把注释里的sourceMap 都转为了 DataURL。
cheap-source-map
和 source-map 生成结果差不多。output 目录下的index.js内容一样。
但是 cheap-source-map 生成的 index.js.map 的内容却比 source-map 生成的 index.js.map 要少很多代码,我们对比一下上文 source-map 生成的 index.js.map 的结果,发现source属性里面少了列信息,只剩一个"webpack:///js/index.js"。
// index.js.map{ "version":3, "file":"js/index.js", "sources":["webpack:///js/index.js"], "sourcesContent":[...], "mappings":"AAAA", "sourceRoot":""}cheap-module-source-map
// index.js.map{ "version":3, "file":"js/index.js", "sources":["webpack:///js/index.js"], "mappings":"AAAA", "sourceRoot":""}在 cheap-module-source-map 下 sourceMap 的内容更少了,sourceMap的列信息减少了,可以看到sourcesContent也没有了。
这么多模式用哪个好?
开发环境推荐:
cheap-module-eval-source-map
生产环境推荐:
cheap-module-source-map
这也是下版本 webpack 使用 -d 命令启动 debug 模式时的默认选项
原因如下:
SourceMap模式效率对比图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
webpack.config.js在配置devtool时,webpack给我们提供了四种选项source-map:在一个单独文件中产生一个完整且功能完全的文件。
webpack项目调试-sourcemapwebpack配置提供了devtool这个选项,如果设置为‘#source-map',则可以生成.map文件,在chr
1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打
类似于这样的map文件由webpack自动生成参数:devtool:'#eval-source-map',//映射js到原文件由于打包后的js调试不方面,所以应
qq简洁模式的区别: 1、QQ简洁模式主要隐藏了QQ里的各种个性装扮,并且可以设置QQ的主题颜色,截止2020年7月13日,目前有7种颜色。 2、QQ简洁模