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上 →  傳送門