腳手架原理之webpack啟動(dòng)服務(wù)器和處理sourcemap

Source Map 簡(jiǎn)介

Source Map（源代碼地圖）就是解決此類問(wèn)題最好的辦法，從它的名字就能夠看出它的作用：映射轉(zhuǎn)換后的代碼與源代碼之間的關(guān)系。一段轉(zhuǎn)換后的代碼，通過(guò)轉(zhuǎn)換過(guò)程中生成的 Source Map 文件就可以逆向解析得到對(duì)應(yīng)的源代碼。

啟動(dòng)服務(wù)環(huán)境

目前我們的webpack是沒(méi)有服務(wù)環(huán)境的，那么如何啟動(dòng)一個(gè)web服務(wù)器呢？可以通過(guò)webpack-dev-server模塊，下載使用即可。

npm install webpack-dev-server

安裝好后，再package.json中配置scripts腳本，"serve": "webpack-dev-server"，然后運(yùn)行serve腳本。這樣就會(huì)啟動(dòng)一個(gè)http://localhost:8080的服務(wù)。

當(dāng)開(kāi)啟了web服務(wù)后，咱們的/dist文件可以不用存在了，服務(wù)會(huì)把dist的資源打入到內(nèi)存中，這樣可以大大加快編譯的速度，所以/dist文件夾可以刪除掉了，不影響服務(wù)的啟動(dòng)和訪問(wèn)。

處理sourcemap

socurcemap啟動(dòng)映射文件的作用，可以通過(guò)瀏覽器查找到原始的文件，這樣對(duì)于調(diào)試是非常有幫助的，配置如下：

module.exports = {
    devtool: 'inline-source-map'
}

補(bǔ)充：

Webpack5 SourceMap

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、SourceMap有什么用

為什么需要SourceMap
開(kāi)發(fā)時(shí)我們運(yùn)行的代碼是經(jīng)過(guò) Webpack 編譯壓縮合并之后的，這樣的目的是以提高應(yīng)用程序的性能，但是這種優(yōu)化也給調(diào)試問(wèn)題帶來(lái)了困難，因?yàn)閴嚎s后的代碼難以追蹤和調(diào)試。這時(shí)候，SourceMap技術(shù)就能派上用場(chǎng)了。
SourceMap（源代碼映射）是一個(gè)用來(lái)生成源代碼與構(gòu)建后代碼一一映射的文件的方案。
它會(huì)生成一個(gè) xxx.map 文件，里面包含源代碼和構(gòu)建后代碼每一行、每一列的映射關(guān)系。當(dāng)構(gòu)建后代碼出錯(cuò)了，會(huì)通過(guò) xxx.map 文件，從構(gòu)建后代碼出錯(cuò)位置找到映射后源代碼出錯(cuò)位置，從而讓瀏覽器提示源代碼文件出錯(cuò)位置，幫助我們更快的找到錯(cuò)誤根源。

可以提升開(kāi)發(fā)體驗(yàn) 我們需要更加準(zhǔn)確的錯(cuò)誤提示，來(lái)幫助我們更好的開(kāi)發(fā)代碼

二、怎么使用SourceMap

通過(guò)查看Webpack DevTool 文檔可知，SourceMap 的值有很多種情況，但Webpack5甚至更早的版本已經(jīng)為我們內(nèi)置了SourceMap，所以實(shí)際開(kāi)發(fā)時(shí)我們只需要關(guān)注兩種情況即可：

• 在開(kāi)發(fā)模式下使用：cheap-module-source-map
• 優(yōu)點(diǎn)：打包編譯速度快，只包含行映射
• 缺點(diǎn)：沒(méi)有列映射

module.exports = {
  // 其他省略
  mode: "development",
  devtool: "cheap-module-source-map",
};

在生產(chǎn)模式下使用：source-map

• 優(yōu)點(diǎn)：包含行/列映射
• 缺點(diǎn)：打包編譯速度更慢

module.exports = {
  // 其他省略
  mode: "production",
  devtool: "source-map",
};

三、需要注意的點(diǎn)

生產(chǎn)環(huán)境我們一般不會(huì)開(kāi)啟sourceMap功能，主要原因如下：

1，通過(guò)bundle和sourcemap文件，可以反編譯出源碼，也就是說(shuō)，線上產(chǎn)物有sourcemap文件的話，就意味著有暴露源碼的風(fēng)險(xiǎn)。
2，我們可以觀察到，sourcemap文件的體積相對(duì)比較巨大，這和我們生產(chǎn)環(huán)境的追求不同（生產(chǎn)環(huán)境追求更小更輕的bundle.）

所以有如下總結(jié)：Webpack 5中，是否需要開(kāi)啟source-map取決于你的具體需求和項(xiàng)目情況。以下是一些考慮因素：

• 調(diào)試能力：如果你需要在生產(chǎn)環(huán)境中進(jìn)行調(diào)試，查找問(wèn)題或者進(jìn)行性能優(yōu)化，開(kāi)啟source-map可以提供更好的源代碼映射，方便你定位和排查問(wèn)題。
• 構(gòu)建速度和輸出文件大小：生成source-map會(huì)增加構(gòu)建時(shí)間和打包后的文件大小。在生產(chǎn)模式下，你可能更關(guān)注性能和用戶體驗(yàn)，因此可以選擇關(guān)閉source-map以減小輸出文件大小并提高構(gòu)建速度。
• 安全性考慮：在某些情況下，你可能不希望將源代碼暴露給終端用戶。生成source-map可能會(huì)泄露你的源代碼邏輯，因此需要權(quán)衡安全性和調(diào)試需求。

總結(jié)來(lái)說(shuō)，開(kāi)啟source-map在生產(chǎn)模式下不是必須的，但根據(jù)具體需求和項(xiàng)目特點(diǎn)，你可以根據(jù)以上因素進(jìn)行判斷和決策。

到此這篇關(guān)于webpack啟動(dòng)服務(wù)器和處理sourcemap的操作方法的文章就介紹到這了,更多相關(guān)webpack啟動(dòng)服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！