腳手架原理之webpack啟動服務器和處理sourcemap

Source Map 簡介

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

啟動服務環(huán)境

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

npm install webpack-dev-server

安裝好后，再package.json中配置scripts腳本，"serve": "webpack-dev-server"，然后運行serve腳本。這樣就會啟動一個http://localhost:8080的服務。

當開啟了web服務后，咱們的/dist文件可以不用存在了，服務會把dist的資源打入到內存中，這樣可以大大加快編譯的速度，所以/dist文件夾可以刪除掉了，不影響服務的啟動和訪問。

處理sourcemap

socurcemap啟動映射文件的作用，可以通過瀏覽器查找到原始的文件，這樣對于調試是非常有幫助的，配置如下：

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

補充：

Webpack5 SourceMap

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

一、SourceMap有什么用

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

可以提升開發(fā)體驗 我們需要更加準確的錯誤提示，來幫助我們更好的開發(fā)代碼

二、怎么使用SourceMap

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

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

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

在生產模式下使用：source-map

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

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

三、需要注意的點

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

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

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

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

總結來說，開啟source-map在生產模式下不是必須的，但根據(jù)具體需求和項目特點，你可以根據(jù)以上因素進行判斷和決策。

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

最新評論