(16/24) webpack打包後的調試方法

在程序開發中，調試程序是最頻繁的，那使用了webpack後，全部的代碼都打包到了一塊兒，這給調試帶來了困難，可是webpack在設計時就已經考慮好了這點，它支持生產Source Maps來方便咱們的調試。

Source Maps可以提供將壓縮文件恢復到源文件原始位置的映射代碼的方式，在Chrome和Firefox的開發工具既附帶內置的Source Maps的支持。 Source Maps詳細學習

在使用webpack時只要經過簡單的devtool配置，webapck就會自動給咱們生產source maps 文件,map文件是一種對應編譯文件和源文件的方法，使調試變得簡單。

在配置devtool時，webpack給咱們提供了四種選項。

1.source-map:在一個單獨文件中產生一個完整且功能徹底的.map文件（能定位到具體某行某個位置）。這個文件具備最好的source map,可是它會減慢打包速度；
在webpack.config.js中的入口文件上方配置：

module.exports = {
  devtool: 'eval-source-map', //配置調試
  entry:  "",
  output: {}
}

打包後的結果：

2.cheap-module-source-map:在一個單獨的文件中產生一個不帶列映射的map（會告訴你具體某行出錯，而不能具體到某行某個位置出錯。），不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號）,會對調試形成不便。
在webpack.config.js中的入口文件上方配置：

module.exports = {
  devtool: 'eval-source-map', //配置調試
  entry:  "",
  output: {}
}

打包後結果：

3.eval-source-map:使用eval打包源文件模塊，在同一個文件中生產乾淨的完整版的sourcemap（能定位到具體某行某個位置），可是對打包後輸出的JS文件的執行具備性能和安全的隱患。在開發階段這是一個很是好的選項，在生產階段則必定要不開啓這個選項（生產時刪除配置）
在webpack.config.js中的入口文件上方配置：

module.exports = {
  devtool: 'eval-source-map', //配置調試
  entry:  "",
  output: {}
}

打包後結果：

4.cheap-module-eval-source-map:這是在打包文件時最快的生產source map的方法，生產的 Source map 會和打包後的JavaScript文件同行顯示，沒有映射列（會告訴你具體某行出錯，而不能具體到某行某個位置出錯。），和eval-source-map選項具備類似的缺點。
在webpack.config.js中的入口文件上方配置：

module.exports = {
  devtool: 'cheap-module-eval-source-map', //配置調試
  entry:  "",
  output: {}
}

打包後結果：

四種打包模式，有上到下打包速度愈來愈快，不過同時也具備愈來愈多的負面做用，較快的打包速度的後果就是對執行和調試有必定的影響。

注意：若是大型項目可使用source-map，若是是中小型項目使用eval-source-map就徹底能夠應對，須要強調說明的是，source map只適用於開發階段，上線前記得修改這些調試設置。

最後，在打包上線時，注意須要刪除devtool配置。