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)。

四、内联 和 外部 的区别

1. 外部：在built.js的外部生成built.js.map文件，而内联没有
2. 内联构建速度更快

五、根据环境配置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 // 只隐藏源代码，会提示构建后代码错误信息