webpack：devtool配置中的source map
webpack：devtool配置中的source map
- 一、功能作用
- 二、配置文件
- 三、source map格式
- （1）source-map
- （2）inline-source-map
- （3）hidden-source-map
- （4）eval-source-map
- （5）nosources-source-map
- （6）cheap-source-map
- （7）cheap-module-source-map
- 四、内联 和 外部 的区别
- 五、根据环境配置devtool
- （1）开发环境
- （2）生产环境
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 // 只隐藏源代码，会提示构建后代码错误信息
webpack：devtool配置中的source map相关推荐
- webpack——devtool配置及sourceMap的选择
官方手册传送门 官方对devtool配置的定义很简单:选择一种 source map 格式来增强调试过程,不同的值会明显影响到构建build和重新构建rebuild的速度. 不过,什么是source ...
- 【转】webpack中关于source map的配置
Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...
- Angular 开发中的 Source Map
SourceMaps Demystified (.js.map) 当我们构建 Angular 应用程序时,会创建 js 文件和 .js.map(源映射文件)文件. 从本质上讲,源映射是一个 JSON ...
- webpack之source map
webpack之source map 前言 一.什么是source map 二.在webpack中启用source map 三.关于source map的各种模式 前言 通过构建编译之类的操作,我们可 ...
- 记录webpack的source map使用详细说明
common.js export const show = () => {console.log(1212121)();document.write('hello webpack 11') } ...
- webpack source map详解
1. 什么是source map ? 根据名字可以推测出source map就是我们编译后的源文件映射.当使用webpack 编译前端项目时,配置项devtool控制是否生成source map. 2 ...
- Node.js 中 source map 使用问题总结
起源 Node 应用功能越来越复杂,很多业务都开始尝试使用 TypeScript 来开发.现在前端写的 JS 大部分是经过编译过程的,浏览器中通过 source map 的使用,可以很好的解决源码和编 ...
- webpack文件配置
目录 1.mode 2.devtool 3.entry 4.output webpack提供的 CLI 支持很多的参数,例如 --mode,但更多时候我们会使用配置文件来控制webpack的行为.默认 ...
- 你知道source map如何帮你定位源码么？
大家好,我是若川.今天分享一篇我们经常会忽略的定位原始代码位置原理的文章.文章不长,例子不错,可以先收藏,有空时动手试试. 学习源码系列.年度总结.JS基础系列 前言 我们知道,代码上线前要经过压缩, ...
最新文章
- void函数调用时显示不允许使用不完整的_C语言的角落——这些C语言不常用的特性你知道吗？...
- 用python画时序图源代码_使用python实现画AR模型时序图
- fnv64 mysql,centos7安装搭建rabbitmq
- ES 處於“initializing”狀態，此時主節點正在嘗試將分片分配到集群中的數據節點。 如果您看到分片仍處於初始化或未分配狀態太長時間，則可能是您的集群不穩定的警告信號。...
- python代码大全o-Python实现的一个自动售饮料程序代码分享
- 五大经典算法之回溯法
- R开发(part9)--文件系统管理
- 如何修改ant-input的高度_如何利用好Solidworks零件及装配体的多种配置方法？
- Lnmp上安装Yaf学习（一）
- python根据url链接下载文件
- 【网管知识】狼牙抓鸡器中毒后的解决办法
- 一文读懂声纹采集、声纹识别、声纹数据库系统等声纹识别技术在公安业务领域的应用场景
- macbookpro2011安装单系统win10
- 计算机应用英语app,学英语必备的9款APP，学生党都在用
- Android CPU 深度睡眠,什么是CPU更深度睡眠
- 渝北统景碑口规划开发_渝北区碑口水库主体工程开建
- python中的pd是什么意思_python中pd的用法 python中列表的用法
- 使用360浏览器出现域名解析错误和有道词典连接不了网络的解决方法
- Nginx添加腾讯安全HTTPS证书
- 同时删除多个 PDF 文档最后几页