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

全栈程序员-站长 • 2022年10月5日下午5:00 • 未分类 • 阅读 7

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

Jetbrains全系列IDE稳定放心使用

作用：

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']
                    }
                }
            }
        ]
    }
}