一、什么是sourcemap?
sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术。尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换。将工程代码和开发代码建立起一种映射关系,方便查找及定位bug调试。
备注:本文node版本10.13.0 ,webpack版本4.26.0 webpack-cli版本3.1.2
二、sourcemap简单配置
根据上篇文章增加 sourcemap配置如下:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
// 一般开发环境配置
// development devtool: 'cheap-module-eval-source-map',
// 一般情况生产环境配置
// production devtool: 'cheap-module-source-map',
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
}]
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
}), new CleanWebpackPlugin(['dist'])],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}
三、devtool配置说明
- eval: 生成代码 每个模块都被eval执行,并且存在@sourceURL
- cheap-eval-source-map: 转换代码(行内) 每个模块被eval执行,并且sourcemap作为eval的一个dataurl
- cheap-module-eval-source-map: 原始代码(只有行内) 同样道理,但是更高的质量和更低的性能
- eval-source-map: 原始代码 同样道理,但是最高的质量和最低的性能
- cheap-source-map: 转换代码(行内) 生成的sourcemap没有列映射,从loaders生成的sourcemap没有被使用
- cheap-module-source-map: 原始代码(只有行内) 与上面一样除了每行特点的从loader中进行映射
- source-map: 原始代码 最好的sourcemap质量有完整的结果,但是会很慢
看似配置项很多, 其实只是五个关键字eval,source-map,cheap,module,inline的任意组合。
- eval: 使用eval包裹模块代码
- source-map: 产生.map文件
- cheap: 不包含列信息(关于列信息的解释下面会有详细介绍)也不包含loader的sourcemap
- module: 包含loader的sourcemap(比如jsx to js ,babel的sourcemap)
- inline: 将.map作为DataURI嵌入,不单独生成.map文件(这个配置项比较少见)