這一章咱們來說一下如何使用babel以及如何用webpack調(diào)試代碼。這是基礎(chǔ)篇的最后一章，這些文章只是羅列的給大家講解了在一些場(chǎng)景中webpack怎樣使用，這章結(jié)束后會(huì)給大家講解一下如何在我們實(shí)際的開發(fā)及上線的工作環(huán)境中自如的使用webpack。

　　既然我們要使用babel，那babel是什么呢？一句話，babel能讓你使用當(dāng)前瀏覽器還暫時(shí)或者無法支持的“js”，比如es6，es7，JSX等。

　　那么來安裝一下吧：

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

　　安裝完成之后，我們需要在loader中配置一下：

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

　　讓我們簡(jiǎn)單修改一下src/entry.js中的代碼，就改成這樣吧：

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

　　npm run server，發(fā)現(xiàn)完全沒問題。

　　那么做一個(gè)小小的修改，我們?cè)诟夸浵滦陆ㄒ粋€(gè).babelrc文件，其實(shí)babel的配置項(xiàng)很多，為了讓config.js看起來更清爽，咱們有關(guān)于babel的配置都寫在這里（只是目前咱們沒用到多少）。

　　.babelrc的內(nèi)容這樣寫：

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

　　然后修改一下config.js中的babel-loader配置：

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

　　修改完成之后，我們?cè)賮韓pm run server試一下。沒問題！

　　那么打包完成之后我們開發(fā)的時(shí)候如何調(diào)試代碼呢？我們可以通過配置devtool生成map，來使調(diào)試變得更簡(jiǎn)單。map其實(shí)就是源文件和打包后生成文件的一種映射。

　　在配置devtool時(shí)，webpack給我們提供了四種選項(xiàng)。

source-map:在一個(gè)單獨(dú)文件中產(chǎn)生一個(gè)完整且功能完全的文件。這個(gè)文件具有最好的source map,但是它會(huì)減慢打包速度；
cheap-module-source-map:在一個(gè)單獨(dú)的文件中產(chǎn)生一個(gè)不帶列映射的map，不帶列映射提高了打包速度，但是也使得瀏覽器開發(fā)者工具只能對(duì)應(yīng)到具體的行，不能對(duì)應(yīng)到具體的列（符號(hào)）,會(huì)對(duì)調(diào)試造成不便。
eval-source-map:使用eval打包源文件模塊，在同一個(gè)文件中生產(chǎn)干凈的完整版的sourcemap，但是對(duì)打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患。在開發(fā)階段這是一個(gè)非常好的選項(xiàng)，在生產(chǎn)階段則一定要不開啟這個(gè)選項(xiàng)。
cheap-module-eval-source-map:這是在打包文件時(shí)最快的生產(chǎn)source map的方法，生產(chǎn)的 Source map 會(huì)和打包后的JavaScript文件同行顯示，沒有影射列，和eval-source-map選項(xiàng)具有相似的缺點(diǎn)。

　　四種打包模式，有上到下打包速度越來越快，不過同時(shí)也具有越來越多的負(fù)面作用，較快的打包速度的后果就是對(duì)執(zhí)行和調(diào)試有一定的影響。

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

　　個(gè)人意見是，如果大型項(xiàng)目可以使用source-map，如果是中小型項(xiàng)目使用eval-source-map就完全可以應(yīng)對(duì)，需要強(qiáng)調(diào)說明的是，source map只適用于開發(fā)階段，上線前記得修改這些調(diào)試設(shè)置。

　　使用方法也非常簡(jiǎn)單，只要在webpack.config.js中加一個(gè)配置項(xiàng)就可以了：

　　記住一個(gè)很必要的事情，就是如果你使用了uglifyjs-webpack-plugin，記得在該插件的配置中寫入sourceMap:true字段。這樣才可以正常的生成sourceMap，詳情請(qǐng)查看https://github.com/webpack-contrib/uglifyjs-webpack-plugin

　　　　OK，至此，webpack的基本配置和使用方法就講解完了。這個(gè)項(xiàng)目的相關(guān)demo已經(jīng)上傳到我的github。大家可以查閱學(xué)習(xí)。但是我還是建議大家一定要自己跟著教程多練習(xí)。不然是沒什么實(shí)際效果的。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。