這一章咱們來說一下如何使用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。大家可以查閱學習。但是我還是建議大家一定要自己跟著教程多練習。不然是沒什么實際效果的。

總結

以上是生活随笔為你收集整理的走近webpack（5）--devtool及babel的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。