WebPack打包后如何调试

做为一个程序员天天的大部分工做就是调试本身写的程序，那咱们使用了webpack后，因此代码都打包到了一块儿，给调试带来了麻烦，可是webpack已经为咱们充分考虑好了这点，它支持生产Source Maps来方便咱们的调试。

在使用webpack时只要经过简单的devtool配置，webapck就会自动给咱们生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让咱们调试起来更简单。

四种选项

在配置devtool时，webpack给咱们提供了四种选项。

 source-map:在一个单独文件中产生一个完整且功能彻底的文件。这个文件具备最好的source map,可是它会减慢打包速度；

 cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提升了打包速度，可是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试形成不便。
 
 eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，可是对打包后输出的JS文件的执行具备性能和安全的隐患。在开发阶段这是一个很是好的选项，在生产阶段则必定要不开启这个选项。
 
 cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具备类似的缺点。

四种打包模式，有上到下打包速度愈来愈快，不过同时也具备愈来愈多的负面做用，较快的打包速度的后果就是对执行和调试有必定的影响。

我的意见是，若是大型项目可使用source-map，若是是中小型项目使用eval-source-map就彻底能够应对，须要强调说明的是，source map只适用于开发阶段，上线前记得修改这些调试设置。

简单的配置：

module.exports = {
 //devtool调试
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

去除打包生成的map文件

productionSourceMap: false

调试在开发中也是必不可少的，可是必定要记得在上线前必定要修改webpack配置，在打出上线包。

更多webpack相关例子我放到Github上 →  传送门