走近webpack（5）--devtool及babel的使用

　　這一章我們來講一下如何使用babel以及如何用webpack調試代碼。這是基礎篇的最後一章，這些文章只是羅列的給你們講解了在一些場景中webpack怎樣使用，這章結束後會給你們講解一下如何在咱們實際的開發及上線的工做環境中自如的使用webpack。

　　既然咱們要使用babel，那babel是什麼呢？一句話，babel能讓你使用當前瀏覽器還暫時或者沒法支持的「js」，好比es6，es7，JSX等。

　　那麼來安裝一下吧：

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
/*babel-core是babel的核心功能包，babel-loader就不用說了，轉換目標代碼的babel包，babel-preset-env也就是轉換es6語法的包,babel-preset-react就是轉換JSX的包*/

　　安裝完成以後，咱們須要在loader中配置一下：

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "env","react"
            ]
        }
    },
    exclude:/node_modules/
}

　　讓咱們簡單修改一下src/entry.js中的代碼，就改爲這樣吧：

let name = "Hello zaking"
document.getElementById('title').innerHTML=name;

　　npm run server，發現徹底沒問題。

　　那麼作一個小小的修改，咱們在根目錄下新建一個.babelrc文件，其實babel的配置項不少，爲了讓config.js看起來更清爽，我們有關於babel的配置都寫在這裏（只是目前我們沒用到多少）。

　　.babelrc的內容這樣寫：

{
  "presets":["react","env"]
}

　　而後修改一下config.js中的babel-loader配置：

{
     test:/\.(jsx|js)$/,
     use:{
          loader:'babel-loader'
      },
       exclude:/node_modules/
}
/*也就是刪除了options配置項*/

　　修改完成以後，咱們再來npm run server試一下。沒問題！

 

　　那麼打包完成以後咱們開發的時候如何調試代碼呢？咱們能夠經過配置devtool生成map，來使調試變得更簡單。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選項具備類似的缺點。

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

　　（更多配置信息能夠查看webpack文檔：https://doc.webpack-china.org/configuration/devtool/）

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

　　使用方法也很是簡單，只要在webpack.config.js中加一個配置項就能夠了：

　　記住一個很必要的事情，就是若是你使用了uglifyjs-webpack-plugin，記得在該插件的配置中寫入sourceMap:true字段。這樣才能夠正常的生成sourceMap，詳情請查看https://github.com/webpack-contrib/uglifyjs-webpack-plugin

　　　　OK，至此，webpack的基本配置和使用方法就講解完了。這個項目的相關demo已經上傳到個人github。你們能夠查閱學習。可是我仍是建議你們必定要本身跟着教程多練習。否則是沒什麼實際效果的。