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