webpack:devtool配置中的source map
devtool控制是否生成,以及如何生成 source map
一、功能作用
source-map:一种提供源代码到构建后代码映射技术
如果构建后代码出错了,通过映射可以追踪源代码错误
二、配置文件
webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader的配置
{
// 处理less资源
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 处理css资源
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
// plugins的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true,
hot: true // HMR热模块替换
},
devtool: 'source-map'
};
三、source map格式
devtool: '[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map'
选择一种 source map 格式来增强调试过程。
不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。
(1)source-map
devtool: 'source-map'
source-map:外部
提供:错误代码准确信息 和 源代码的错误位置
整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。
(2)inline-source-map
devtool: 'inline-source-map'
source-map:内联
提供:错误代码准确信息 和 源代码的错误位置
只生成一个内联source-map
source map 转换为 DataUrl 后添加到 bundle 中。
(3)hidden-source-map
devtool: 'hidden-source-map'
source-map:外部
提供:错误代码错误原因,但是没有错误位置
不能追踪源代码错误,只能提示到构建后代码的错误位置
与 source-map 相同,但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。
(4)eval-source-map
devtool: 'eval-source-map'
source-map:内联
提供:错误代码准确信息 和 源代码的错误位置
每一个文件都生成对应的source-map,都在eval
每个模块使用 eval() 执行,并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
(5)nosources-source-map
devtool: 'nosources-source-map'
source-map:外部
提供:错误代码准确信息, 但是没有任何源代码信息
创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪,而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。
(6)cheap-source-map
devtool: 'cheap-source-map'
source-map:外部
提供:错误代码准确信息 和 源代码的错误位置
只能精确的行
没有列映射(column mapping)的 source map,忽略 loader source map。
(7)cheap-module-source-map
devtool: 'cheap-module-source-map'
source-map:外部
提供:错误代码准确信息 和 源代码的错误位置
module会将loader的source map加入
没有列映射(column mapping)的 source map,将 loader source map 简化为每行一个映射(mapping)。
四、内联 和 外部 的区别
- 外部:在
built.js
的外部生成built.js.map
文件,而内联没有 - 内联构建速度更快
五、根据环境配置devtool
(1)开发环境
要求:速度快,调试更友好
配置:eval-source-map / eval-cheap-module-souce-map
- 速度快(
eval
>inline
>cheap
>…):
eval-cheap-souce-map
eval-source-map
- 调试更友好:
souce-map
cheap-module-souce-map
cheap-souce-map
(2)生产环境
要求:源代码要不要隐藏? 调试要不要更友好?
配置:source-map / cheap-module-souce-map
内联会让代码体积变大,所以在生产环境不用内联
nosources-source-map // 源代码和构建后代码全部隐藏
hidden-source-map // 只隐藏源代码,会提示构建后代码错误信息