走近webpack(5)--devtool及babel的使用
這一章咱們來說一下如何使用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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 小程序体验版路径以及参数携带
- 下一篇: 任天堂Switch销量即将超越索尼PS4