source-map 配置

source-map 配置

sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术。我们的开发代码通常都会被编译压缩，若原始代码中出现错误，那么很难找到错误所在位置，使用source-map就会使我们很快定位到错误在原代码的位置。

配置 source-map

module.exports = {
    mode:'development', 
    entry:'./src/index.js',  
    devtool:'source-map',      //增加映射文件，可以帮助我们调试源代码
    output:{
        filename:'bundle.js',  
        path:path.resolve(__dirname,'/build'), 
    }
}

devtool 四种不同方法

内联： 不会生成外部文件

外联： 生成外部文件

内联构建速度更快

source map 产生 .map文件

cheap 不包含列信息

也可以通过 SourceMapDevToolPlugin 插件，这个插件可以修改map文件的引用地址，同时借助 filemanager-webpack-plugin 将 map 文件移动到指定服务器

补充

补充：devtool 关键字速记（按构建速度从快到慢）：

• eval：用 eval 包裹模块，速度最快，但定位不准。
• eval-source-map：每个模块用 eval 包裹 + 完整 sourcemap，开发首选。
• eval-cheap-module-source-map：带 loader 源码、忽略列信息，速度好。
• cheap-module-source-map：生成独立 .map 文件，开发/生产调试都可。
• source-map：完整独立 .map，最准最慢，常用于生产。
• hidden-source-map：生成 map 但不在产物中引用（用于把 map 上传到 Sentry 类的错误平台）。 命名解析：[xxx-][module-][eval-][cheap-[module-]]source-map。开发推荐 eval-cheap-module-source-map，生产推荐 hidden-source-map + Sentry。

来源整理自：我的有道云笔记