在前端开发中，我们经常会使用 webpack 来打包我们的代码，以便于部署和维护。在 webpack 中，devtool 属性可以用来设置 source map 的生成方式，方便我们在开发过程中进行调试。本文就来详细解析一下 webpack 中的 devtool 属性。
devtool 的作用
devtool 的作用是生成 source map 文件，用于在调试时映射编译前和编译后的代码，从而方便调试。使用 devtool 可以帮助开发人员快速地定位代码问题。
举个例子，如果你在使用 webpack 构建一个 JavaScript 应用程序时遇到了一个错误，这个错误是在编译后出现的，此时你打开浏览器控制台的调试工具，只能看到编译后的代码，很难准确地找到出错的地方。但是如果你使用了 devtool，就可以在控制台中看到编译前的代码，并直接找到问题所在。
devtool 属性的类型
devtool 属性有很多不同的取值，每种取值都对应一种 source map 的生成方式。下面是各种不同的 devtool 类型：
eval
eval 类型是最快的 source map 生成方式，速度很快，但是生成的 source map 信息比较少，只包含行号，不包含列号和一些其他信息。如果你需要快速构建应用程序并进行调试，eval 类型是一个不错的选择。
module.exports = {
// ...
devtool: 'eval'
// ...
}eval-source-map
eval-source-map 类型相比 eval 类型多了更多的 source map 信息。它会在每个打包后的文件中增加一个 DataUrl（data:application/json;base64,XXXXX），里面包含了 source map 的信息。这种方式有助于提高编译过程中的性能，但会使得文件大小变大。
module.exports = {
// ...
devtool: 'eval-source-map'
// ...
}inline-source-map
inline-source-map 类型也会生成 source map，但是它会将 source map 的信息嵌入到打包后的文件中，而不是使用 DataUrl。这种方式的好处是源代码和 source map 一起加载，不需要额外的请求，但是这样也会使得文件的大小变大。
module.exports = {
// ...
devtool: 'inline-source-map'
// ...
}source-map
source-map 类型可以生成一个单独的 sourcemap 文件，并且在打包的文件中引入 sourcemap 的路径，便于调试时使用。这种方式不会使得文件变大。
module.exports = {
// ...
devtool: 'source-map'
// ...
}hidden-source-map
hidden-source-map 类型与 source-map 类型类似，也会生成一个单独的 sourcemap 文件，但是不会在打包的文件中引入 sourcemap 的路径，只有在开发者工具中手动输入路径才能进行调试。
module.exports = {
// ...
devtool: 'hidden-source-map'
// ...
}nosources-source-map
nosources-source-map 类型也会生成一个单独的 sourcemap 文件，但是其中的所有源代码都已经被删除。这种方式可以防止源代码泄露，但是仍然可以进行调试。
module.exports = {
// ...
devtool: 'nosources-source-map'
// ...
}devtool 的选择
devtool 的选择应该根据具体的项目需求和开发环境来决定。下面给出一些使用场景的建议：
- 如果你需要快速构建应用程序并进行调试，可以使用
eval或eval-source-map类型。 - 如果你需要快速模块热更新，应该使用
eval-source-map类型。 - 如果你需要进行生产环境的构建，应该使用
source-map类型。 - 如果你不需要在生产环境中进行调试，建议使用
hidden-source-map或nosources-source-map类型。
使用示例
接下来，我们来看一下如何在 webpack 中使用 devtool 属性。
-- -------------------- ---- -------
-------------- - -
------ -
---- -----------------
--
------- -
--------- -------------------
----- ----------------------- --------
--
-------- -------------
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
--
--
--以上是一个简单的 webpack 配置文件示例，其中 devtool 属性的取值为 source-map，表示我们需要在构建时生成一个单独的 sourcemap 文件。
总结
开发者在使用 webpack 构建应用程序时，必须使用 source map 来方便地进行调试，而 devtool 属性就是用来生成 source map 的。在选择 devtool 类型时，开发者必须要根据具体的项目需求和开发环境来决定。希望这篇文章可以帮助你更好地使用 webpack 进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64842f7348841e9894355ac6