zoukankan      html  css  js  c++  java
  • 前端项目工程化 -- webpack -- Source Maps

    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

  • 相关阅读:
    JS中的getter与setter
    Node.js中exports与module.exports的区别
    JS中的匿名函数自执行、函数声明与函数表达式
    JS实现千分位
    JS中的new操作符原理解析
    JS中null与undefined的区别
    JavaScript中callee与caller,apply与call解析
    解决vue路由与锚点冲突
    jQuery中deferred的对象使用
    Vue的生命周期
  • 原文地址:https://www.cnblogs.com/MissSage/p/14890369.html
Copyright © 2011-2022 走看看