webpack devtool

简介

webpack devtool可用来控制是否生成以及如何生成source map。或者使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 进行更细粒度的配置。

语法

• devtool：string/false

推荐用法

• 开发环境：eval-source-map // 每个模块使用eval()执行，并且source map转换为DataUrl后添加到eval()中，初始时比较难，重新构建时会很快，行数被正确映射，会映射到原始代码。
• 生产环境：nosources-source-map // 不暴露源代码，可用于在客户端映射堆栈跟踪，可部署至web-server。

关键词

• webpack:// webpack 正式的加载source map源码的URL Scheme Protocol，可始终采用此souce-map来调试。
• webpack-internal:// webpack 内部的加载source map源码的URL Scheme Protocol，用于非 production环境source map。

注释

source map是一个将压缩文件中的代码映射回源文件的原始位置的文件。通过在已压缩文件的底部添加特殊注释(//# sourceMappingURL=/path/to/script.js.map、//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozL······等)，便可以向浏览器指示源映射可用。仅当打开了devtool并且开启了对源文件映射配置时，开发人员工具才会加载此文件。

source map文件包含一个json对象，其中包含有关source map本身和源文件的相关信息，如下：

{
    version: 3,  // 此属性指示文件遵循的source map 规格版本
    file: "js/app.deea0f7e.js", // 转换后的文件名
    sources:[ // 转换前的文件。该项是一个数组，表示可能存在多个文件合并
       "webpack:///webpack/bootstrap",
        "webpack:///./src/App.vue?9b05",
        "webpack:///./src/components/test-upload.vue?d33e",
    ],
    sourceRoot:"", // 转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空
    sourcesContent:"", // source Map 内容
    names:["slideUp", "slideDown", "save"]， // 转换前的所有变量名和属性名
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO······",  // 记录位置信息的字符串，包含映射逻辑的Base64 VLQ字符串(variable-length-quantity，简称为VLQ，是一种在文本中编码大整数的紧凑方式)
}