webpack-devtool的详细配置

当webpack进行打包的时候，可能会遇到错误和警告信息，那么此时信息的位置很重要。

比如我们一共有a.js、b.js两个文件，通过webpack后会打包到build.js文件中。此时a.js文件中有错误信息，但是提示信息会在build.js文件中输出，并且输出结果是通过打包编译甚至是压缩后的结果，对我们实际上是没有帮助的。JavaScript提供了source mao的功能，将编译后的代码映射到原始代码中。此时可以配置webpack来进行文件追踪。比如一个错误来自a.js文件，source map就会告诉你

不同的devtool配置会导致打印和输出的结果不同

目录结构：

 none的状态

module.exports = {
  devtool: 'none',
}

 

 输出结果是build.js文件的结果，也就是打包之后的结果，所以none表示没有任何的配置，build文件中没有任何的执行代码

 eval的状态（默认状态）

devtool: 'eval'

设置这个状态表示所有的执行都在build.js文件中，此时的控制台输出是打包前的文件

 

 

  source-map的状态

devtool: 'source-map',

 

该状态，打包之后会发现dist文件夹（打包后的文件夹）目录下多了一个build.js.map文件，此文件记录了sourceMap信息，也就是如何映射源代码的信息

所有的相关引入都会sources数组中

build.js.map

 

 

 build.js文件中也会有注释，内容是告诉你这个文件的映射文件是哪个

 

 

 控制台中输出的也是打包前的文件地址

 

 

 hidden-source-map的状态

devtool: 'hidden-source-map',

也会生成一个build.js.map文件

 

 

 和source-map的不同是build.js最后没有了注释，并且浏览器的输出信息是build.js的位置，也就是打包后位置

 inline-source-map的状态

devtool: 'inline-source-map',

打包后没有了build.js.map文件，而是在build.js文件的最后加了注释，注释的内容就是sourceMap文件的地址

 

 浏览中输出的是打包前的文件路径

eval-source-map的状态

devtool: 'eval-source-map',

打包后的build文件是通过eval命名执行的

 

 浏览器中打印的是打包前的文件路径，但是文件加了编号

 cheap-source-map的状态

eval-cheap-source-map - 类似 eval-source-map，每个模块使用 eval() 执行。这是 "cheap(低开销)" 的 source map，因为它没有生成列映射(column mapping)，只是映射行数。它会忽略源自 loader 的 source map，并且仅显示转译后的代码，就像 eval devtool。

devtool: 'cheap-source-map',

和sources-map类似，cheap-source-map生产的build.js.map文件内容比csource-map生产的build.js.map文件的内容要少，并且build.js文件的最后也有sourceMap文件的路径，浏览器显示的也是打包前的文件路径

 cheap-module-source-map的状态

在这种情况下，源自 loader 的 source map 会得到更好的处理结果。然而，loader source map 会被简化为每行一个映射

devtool: 'cheap-module-source-map',

和sources-map类似，cheap-source-map生产的build.js.map文件内容比csource-map生产的build.js.map文件的内容要少，并且build.js文件的最后也有sourceMap文件的路径，浏览器显示的也是打包前的文件路径

devtool:https://webpack.docschina.org/configuration/devtool/

开发推荐使用：eval、eval-source-map、cheap-eval-source-map、cheap-module-eval-source-map

生产推荐使用：none、source-map、hidden-source-map、inline-source-map