webpack入門到高階(七) devtool

2021-09-24 19:16:09 字數 813 閱讀 4289

此選項控制是否生成,以及如何生成 source map。

一,為什麼要控制source map的生成?

我們在開發的過程中,難免會遇到專案執行的報錯資訊,我們習慣於經常開啟控制台,找到報錯的檔案,檢視報錯區域內容,方便我們更好的開發專案,,因此sourcemap出現了,它就是為了解決不好調式**問題的。

二,選擇何種 source map 格式呢?

選擇一種 source map 格式來增強除錯過程。不同的值會明顯影響到構建(build)和重新構建(rebuild)的速度。

所以我們要根據開發環境,或者生產環境的不同需求配置不同的格式選項。

(僅限行的意思)- source map 被簡化為每行乙個對映。這通常意味著每個語句只有乙個對映(假設你使用這種方式)。這會妨礙你在語句級別上調試執行,也會妨礙你在每行的一些列上設定斷點。與壓縮後的**組合後,對映關係是不可能實現的,因為壓縮工具通常只會輸出一行。我們又不需要考慮列的問題,所以僅限行就足夠了。

(none)(省略devtool選項) - 不生成 source map。這是乙個不錯的選擇。

哈哈哈。至此,我們應該就完成入門的學習了。接下來,在入門階段過程中,還是需要多看文件比較好,我只是分享了下日常專案開發過程中的webpack的常用方法。

接下來,我會很好的分享高階階段的內容。做到內容盡可能充實。

寫的不好的地方,多多指教!!!

webpack入門高階(3)

sass這種css預處理器是以.scss結尾,需要用node sass和sass loader來處理 安裝loader npm i node sass sass loader dwebapck.base.js module 注意 如果出現css檔案中引入sass檔案的情況,只用css loader是...

webpack入門高階(2)

webpack dev server是我們在開發階段需要用到的乙個伺服器,它會把 打包到記憶體,我們可以通過http的方式訪問到打包到記憶體的 安裝npm i webpack dev server 3.8.1 d修改package.json的啟動命令 dev webpack dev server e...

webpack入門高階(1)

初始化專案 mkdir webpack demo cd webpack demo npm init y安裝webpack npm i webpack 4.41.0 webpack cli 3.3.9 d零配置使用webpack,webpack約束源檔案目錄必須為src,預設配置檔案為 src ind...