前端项目工程化 -- webpack -- Source Maps

Posted 2021-06-16 MissSage

webpack怎么配置source maps？

module.exports = {
  devtool: \'eval-source-map\',//配置生成Source Maps，选择合适的选项
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "[name]-[hash].js"
  }
}

几种source maps有什么区别？

• source-map
  打包的同时生成sourcemap文件，会在打包文件末尾加上#sourceMappingURL,指向map文件位置，对打包文件的构建速度有影响；
• cheap-module-source-map
  与source-map相同，但是不带列映射，相对source-map不带列映射可以提高项目构建速度，缺点是使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列，会对调试造成不便；
• eval-source-map
  使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。不影响构建速度，对打包后输出的js文件的执行具有性能和安全的隐患。是开发阶段的一个非常好的选项，生产阶段一定不要用；
• cheap-module-eval-source-map
  这是在打包文件时最快的生成source map的方法，没有列映射，和eval-source-map选项具有相似的缺点；

开发环境和生产环境要怎么选择source-map?

• 开发环境推荐配置
  大型项目考虑到时间成本可以用：cheap-module-eval-source-map
  一般使用：eval-source-map

• 生产环境推荐配置：cheap-module-source-map