webpack sourceMap 使用说明
时间:2016-09-05 15:23:30
作者:zhongxia
webpack文档地址:http://webpack.github.io/docs/build-performance.html#sourcemaps
总结
在开发环境,或者生产环境中,如果出现错误了,在浏览器中,因为代码从被Babel从JSX变成ES5的,代码调试起来很痛苦,因此webpack有了一个代码映射,把转换后的代码映射到之前自己写的代码。
英语水平有限,下面翻译可能存在问题,请帮忙指出。
devtool可选值:
- source-map 【用于生产环境】
- eval-source-map
- eval-cheap-module-source-map
- eval-cheap-source-map
- eval 【建议开发环境用这个】
module.exports = {
devtool: 'eval',
...
}
Perfect SourceMaps are slow.
越好的源码映射,越慢
source-map
devtool: "source-map
" cannot cache SourceMaps for modules and need to regenerate complete SourceMap for the chunk. It’s something for production.
source-map
不能为 模块和需要重新生成的代码块 缓存SourceMaps,它适用于 生产环境。
eval-source-map
devtool: "eval-source-map
" is really as good as devtool: "source-map", but can cache SourceMaps for modules. It’s much faster for rebuilds.
eval-source-map
和source-map
差不多,但是 可以为模块 缓存它可以更快的重建SourceMaps,它可以更快的重建SourceMaps
eval-cheap-module-source-map
devtool: "eval-cheap-module-source-map
" offers SourceMaps that only maps lines (no column mappings) and are much faster.
eval-cheap-module-source-map
只为行(没有列映射)提供SourceMaps 并且 速度更快(相对于 source-map, eval-source-map)
eval-cheap-source-map
devtool: "eval-cheap-source-map
" is similar but doesn’t generate SourceMaps for modules (i.e., jsx to js mappings).
eval-cheap-source-map
和eval-cheap-module-source-map
相似,但是不为模块 生成 SourceMaps(eg:jsx 到 js 的映射)
eval
devtool: "eval
" has the best performance, but it only maps to compiled source code per module. In many cases this is good enough. (Hint: combine it with output.pathinfo: true.)
eval
有最好的性能,但是它只映射到每个模块编译源代码,在更多情况下是足够用的(提示:与output.pathinfo:true
结合使用)
相关知识
output.pathinfo
Include comments with information about the modules.
require(/* ./test */23)
Do not use this in production.
Default: false
The UglifyJsPlugin use SourceMaps to map errors to source code. And SourceMaps are slow. As you should only use this in production, this is fine. If your production build is really slow (or doesn’t finish at all) you can disable it with new UglifyJsPlugin({ sourceMap: false }).
UglifyJsPlugin会让 SourceMaps 映射到源码出现错误,速度变慢。所以把UglifyJsPlugin用于生产环境,这是很好的。
如果你生产环境构建很慢(或者玩不成),可以用new UglifyJsPlugin({ sourceMap: false }).
来禁用sourceMap。