作用：

webpack会将js代码进行压缩打包，loader也会处理相应代码，打包后代码很难进行查看，这也使得开发人员调试时很难找到对应代码位置。此时可采用devtool，通过资源地图的方式，给出打包后代码到原始代码的映射，方便开发人员调试。

要点：

webpack官方给出了多种模式，模式间主要区别以及应用场景已经给出，下面是主要参考参数

示例：

module.exports = {
    /**
     * devtool目前有20多种，都是通过最基础的模式组合而成
     * 基础模式有：
     * (eval、cheap、module、inline、hidden、nosources) +'-source-map'
     */

    /**
     * eval会执行打包后的字符串
     * 字符串中包含了代码源文件位置的注释，同时告诉浏览器资源地图位置sourceURL
     * 然后将eval中内容放入资源地图中
     */
    // devtool: 'eval'

    /**
     * 打包后代码无eval包裹
     * 资源地图将单独存放于*.map文件下，最终通过sourceMappingURL引入
     */
    // devtool: 'source-map'

    /**
     * 三者几乎一致，都是将资源地图内联到打包文件中
     * 通过sourceMappingURL将资源文件做base64处理后引用
     * 所以这里又称作DataURL
     *
     * cheap: 不包含列信息，指浏览器点击跳转资源地图时不会跳到对应列，只会到行的开头
     * module: 指资源地图不经过loader处理，看到的就是原始书写的代码
     */
    // devtool: 'eval-source-map',
    // devtool: 'eval-cheap-source-map',
    devtool: 'eval-cheap-module-source-map',

    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

官方文档：https://webpack.docschina.org/configuration/devtool/