这篇文章主要介绍了webpack之devtool详解,现在分享给大家，也给大家做个参考。
关于Devtool
该选项控制是否以及如何生成源映射。官网上给出的可选值有：
其中一些值适合开发，一些用于生产。对于开发，您通常需要快速的Source Maps，以bundle的大小为代价，但是对于生产，您需要独立的Source Maps，这是精确的，并且支持最小化。
选择一种源映射样式，以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以使用SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin直接有了更多的选择。不要同时使用devtool选项和插件。devtool选项在内部添加了插件，所以你最终会得到应用两次的插件。
实例详解
1.新建print.js
export default function printMe() {
console.log('武昌鱼@222');
}2.新建index.js
import printMe from './print.js';
function component() {
var element = document.createElement('p');
var btn = document.createElement('button');
btn.innerHTML = 'Click 1me and check 1the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());3.新建webpack.config.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: ' webpack之devtool'
})
]
};4.使用不同的devtool选项
none
打包后点击打印按钮，console显示main.js:96，生成代码如下所示：
eval
eval 模式会把每个 module 封装到 eval 里包裹起来执行，并且会在末尾追加注释。
Each module is executed withevaland//@ sourceURL.
打包之后点击打印按钮，console显示print.js:3，生成代码如下所示：
source-map
打包之后你会发现你的 output 目录下多了一个 index.js.map 文件，此文件记录了sourceMap 行列信息如何映射源代码的信息。点击打印按钮，console显示print.js:3，生成代码如下所示：
main.js
main.js.map
hidden-source-map
打包后main.js与 source-map 选项相比少了末尾注释，但 output 目录下的 index.js.map 没有少。点击打印按钮，console显示main.js:96。
inline-source-map
打包后可以看到末尾的注释 sourceMap 作为 DataURL 的形式被内嵌进了 bundle中，由于 sourceMap 的所有信息都被加到了bundle中，整个 bundle 文件变得硕大无比。点击打印按钮，console显示print.js:3，生成代码如下所示：
main.js
eval-source-map
千博购物系统.Net能够适合不同类型商品，为您提供了一个完整的在线开店解决方案。千博购物系统.Net除了拥有一般网上商店系统所具有的所有功能，还拥有着其它网店系统没有的许多超强功能。千博购物系统.Net适合中小企业和个人快速构建个性化的网上商店。强劲、安全、稳定、易用、免费是它的主要特性。系统由C#及Access/MS SQL开发，是B/S(浏览器/服务器)结构Asp.Net程序。多种独创的技术使
和 eval 类似，但是把注释里的 sourceMap 都转为了 DataURL。console显示print.js?dc38:2，生成代码如下所示：
main.js
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 属性里面少了列信息，如下所示：
main.js.map
cheap-module-source-map
在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
总结
开发环境推荐使用：
1.eval ：每个模块使用eval()和//@ sourceURL执行。这是非常快。主要缺点是，它没有正确显示行号，因为它被映射到转换代码而不是原始代码(没有来自加载器的源映射)。
2.eval-source-map：每个模块使用eval()执行，而SourceMap作为DataUrl添加到eval()中。最初它是缓慢的，但是它提供快速的重建速度和产生真实的文件。行号被正确映射，因为它被映射到原始代码。它产生了最优质的开发资源。
3.cheap-eval-source-map：与eval-source-map类似，每个模块都使用eval()执行。它没有列映射，它只映射行号。它忽略了来自加载器的源代码，并且只显示与eval devtool相似的经过转换的代码。
4.cheap-module-eval-source-map：类似于cheap-eval-source-map，在本例中，来自加载器的源映射被处理以获得更好的结果。然而，加载器源映射被简化为每一行的单个映射。
生产环境推荐使用：
1.(none) ：(省略devtool选项)-不触发SourceMap。这是一个很好的选择。
2.source-map：一个完整的SourceMap是作为一个单独的文件。它为bundle 添加了引用注释，因此开发工具知道在哪里找到它。
3.hidden-source-map：与source-map相同，但不向bundle 添加引用注释。如果您只希望SourceMaps从错误报告中映射错误堆栈跟踪，但不想为浏览器开发工具暴露您的SourceMap，可以使用此选项。
4.nosources-source-map：一个SourceMap是在没有源代码的情况下创建的。它可以用于在客户机上映射堆栈跟踪，而不暴露所有源代码。您可以将源映射文件部署到webserver。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
