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

Posted MissSage

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端项目工程化 -- 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

以上是关于前端项目工程化 -- webpack -- Source Maps的主要内容,如果未能解决你的问题,请参考以下文章

使用babel和webpack优化项目

学好webpack,一名前端开发工程师的自我修养。

gulp & webpack整合

前端工程化之构建工具webpack 的基本使用

用webpack构建您的前端项目

webpack工程化实战