webpack-devtool

作用：

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

要点：

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

参数名	参数描述	参数值
devtool	可以使用的devtool	根据基础模式可自行组合，基础模式有：(eval、cheap、module、inline、hidden、nosources)
performance	构建性能	性能主要分为2种：build:构建速度，rebuild：重构速度
production	是否建议生产环境使用	yes为官方建议生产环境使用
quality	devtool特性	特性主要有5种：bundle模块不分离；generated直接生成资源地图；transformed转化后资源地图；original：原始代码；lines：只有行信息
comment	devtool描述	见官方文档

示例：

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/