webpackdevtool配置简单对比简书_钢铁雄心4toolpackMOD

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

作用：

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/