webpck 之(14) 优化配置 之 source-map

开发环境和生产环境皆可

source-map: 一种提供源代码到构建后代码映射技术(如果构建后代码出错了,通过映射可以追踪源代码的位置)

  [inline-|hidden-|eval-] [nosources-] [cheap-[module-]] sourcce-map

  source-map  外部

     错误代码准确信息 和 源代码的错误位置

  inline-source-map    内联

    1.只生成一个内联source-map,内容在打包的built.js中

     2.错误代码准确信息 和 源代码的错误位置

  hidden-source-map  外部   

     1.会生成一个built.js.map (同名.map)的文件

     2.错误代码准确信息 但是 没有错误位置,不能追踪到源代码的位置,只能提示构建后代码的错误位置

  eval-source-map  也是内联

    1.每一个文件都生成对应的source-map,都在eval  内容在打包的built.js中

    2.错误代码准确信息 和 源代码的错误位置

  nosources-map  外部

     1.错误代码准确信息 但是 没有任何源代码信息

  cheap-source-map 外部

     1.错误代码准确信息 和 源代码的错误位置

     2.只能精确到行

        若很多代码写成一行,就只能告诉我们是哪一行,却不知道是哪一列,所以要避免有这种情况发生

       ( 但是 source-map 却可以很准确告诉哪一行)

  cheap-module-source-map  外部

     1.错误代码准确信息 和 源代码的错误位置

     2.module会将loader的source map加入

 

  总结: 内联和 外部的区别:1.外部生成了文件,内联没有 2.内联构建速度更快

 

开发环境:速度快 , 调试更友好 

  速度快(eval>inline>cheap)

      eval-cheap-source-map  组合可以打包更快

      eval-source-map

  调试更友好

      source-map  这种调试最友好

      cheap-module-source-map  

      cheap-source-map

  所以通过以上结论: eval-source-map  /  eval-cheap-module-source-map 最符合

  扩展: vue-cli默认是使用 eval-source-map

生产环境:源代码要不要隐藏?调试要不要更友好

    内联会让代码体积变大,所以在生产环境不用内联,所有内联方案都排除掉

    nosources-source-map  全部隐藏

    hidden-source-map  隐藏源代码 不隐藏构建后的代码,且会提示构建后代码错误信息

   ------> 如果为了安全用上面两个

   但是若仅仅考虑打包速度和调试友好,那就用 source-map /  cheap-source-map

怎么配置?

在webpack.config.js中配置和devServer同级的

module.exports = {
  devServer:{

  },
  devtool:'source-map'
}