webpack的source-map

source-map是什么？

source-map是webpack提供最好的几个功能之一，是为了提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码的错误）

如何使用

module.exports = {
	entry: '',
    output: {},
    module:{},
    plugins: [],
    mode: 'development',
    devServer: {},
    // 使用 source-map
    devtool: 'eval-source-map'
}

source-map有哪些模式

• source-map: 外部
  • 错误代码准确信息 和 源代码的错误位置
• inline-source-map: 内联
  • 只生成一个内联source-map
  • 错误代码准确信息 和 源代码的错误位置
• hidden-source-map: 外部
  • 错误代码的错误原因，但是没有提示错误位置
  • 不追踪源代码的错误，只能提示到构建后代码的错误位置
• eval-source-map: 内联
  • 每一个文件都生成对应的source-map，都在eval
  • 错误代码准确信息 和 源代码的错误位置
• nosource-source-map: 外部
  • 错误代码准确信息，但是没有人任何源代码信息
• cheap-source-map: 外部
  • 错误代码准确信息 和 源代码的错误位置
  • 只能精确到行，但是不能精确到行的哪一块出错
• cheap-module-source-map: 外部
  • 错误代码准确信息 和 源代码的错误位置
  • module会将loader的source-map加入

PS：

内联和外部的区别：

1. 外部生成了文件，内联没有
2. 内联构建速度更快

开发环境和生产环境选择

• 开发环境：速度快，调试友好
  • 速度快（eval>inline>cheap>...）

    • eval-cheap-source-map 这个组合最快

    • eval-source-map - 调试更友好 + source-map + cheap-module-source-map + cheap-source-map

    • 一般开发环境用 eval-source-map
• 生产环境：源代码要不要隐藏，调试要不要友好

  • 内联会让体积变大，所以生产环境不要用内联 - nosource-source-map: 全部代码隐藏 - hidden-source-map: 只隐藏源代码，会提示构建后代码错误信息

    • 一般生产环境用 source-map