一、webpack基礎(chǔ)

推薦我的另一篇文章：Webpack基礎(chǔ)

二、source-map

2.1 認(rèn)識(shí)source-map

代碼通常運(yùn)行在瀏覽器上時(shí)，是通過打包壓縮的：

• 真實(shí)跑在瀏覽器上的代碼，和我們編寫的代碼其實(shí)是有差異的
• 比如ES6的代碼可能被轉(zhuǎn)換成ES5
• 比如對(duì)應(yīng)的代碼行號(hào)、列號(hào)在經(jīng)過編譯后肯定會(huì)不一致
• 比如代碼進(jìn)行丑化壓縮時(shí)，會(huì)將編碼名稱等修改
• 比如使用了TypeScript等方式編寫的代碼，最終轉(zhuǎn)換成JavaScript

但是，當(dāng)代碼報(bào)錯(cuò)需要調(diào)試時(shí)（debug），調(diào)試轉(zhuǎn)換后的代碼是很困難的

那么如何可以調(diào)試這種轉(zhuǎn)換后不一致的代碼呢？答案就是 source-map

• source-map 是從已轉(zhuǎn)換的代碼，映射到原始的源文件
• 使瀏覽器可以重構(gòu)原始源并在調(diào)試器中顯示重建的原始源

2.2 如何使用source-map

如何可以使用source-map呢？

const path = require('path')
module.exports = {
  mode: 'production',
  devtool: "source-map",
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './build')
  }
}

console.log("hello world"),console.log("foo function exec~");
//# sourceMappingURL=bundle.js.map

• 第一步：根據(jù)源文件，生成source-map文件，webpack在打包時(shí)，可以通過配置生成source-map
• 第二步：在轉(zhuǎn)換后的代碼，最后添加一個(gè)注釋，它指向sourcemap

瀏覽器會(huì)根據(jù)我們的注釋，查找相應(yīng)的source-map，并且根據(jù)source-map還原我們的代碼，方便進(jìn)行調(diào)試。

在Chrome中，可以按照如下的方式打開source-map：

• 鼠標(biāo)右鍵檢查，打開控制臺(tái)后點(diǎn)擊右上角的設(shè)置

2.3 source-map文件分析

最初source-map生成的文件大小是原始文件的10倍，第二版減少了約50%，第三版又減少了50%，所以目前一個(gè)133kb的文件，最終的source-map的大小大概在300kb。

目前的source-map長什么樣子呢？

• version：當(dāng)前使用的版本，也就是最新的第三版
• sources：從哪些文件轉(zhuǎn)換過來的source-map和打包的代碼（最初始的文件）
• names：轉(zhuǎn)換前的變量和屬性名稱
• mappings：source-map用來和源文件映射的信息（比如位置信息等），一串base64 VLQ（veriable-length quantity可變長度值）編碼
• file：打包后的文件（瀏覽器加載的文件）
• sourceContent：轉(zhuǎn)換前的具體代碼信息（和sources是對(duì)應(yīng)的關(guān)系）
• sourceRoot：所有的sources相對(duì)的根目錄

2.4 source-map常見值

如何在使用webpack打包的時(shí)候，生成對(duì)應(yīng)的source-map呢？

• webpack 提供了非常多的選項(xiàng)（目前是26個(gè)），來處理source-map
• 選擇不同的值，生成的source-map會(huì)稍微有差異，打包的過程也會(huì)有性能的差異，可以根據(jù)不同的情況進(jìn)行選擇

下面幾個(gè)值不會(huì)生成source-map

false：不使用source-map，也就是沒有任何和source-map相關(guān)的內(nèi)容

none：production模式下的默認(rèn)值（什么值都不寫） ，不生成source-map

eval：development模式下的默認(rèn)值，不生成source-map

• 但是它會(huì)在eval執(zhí)行的代碼中，添加 //# sourceURL=；
• 它會(huì)被瀏覽器在執(zhí)行時(shí)解析，并且在調(diào)試面板中生成對(duì)應(yīng)的一些文件目錄，方便我們調(diào)試代碼

其他常見的值

• source-map：通常在production模式下設(shè)置，生成一個(gè)獨(dú)立的source-map文件，并且在bundle文件中有一個(gè)注釋，指向source-map文件
• bundle文件中有如下的注釋：
• 開發(fā)工具會(huì)根據(jù)這個(gè)注釋找到source-map文件，并且解析 //# sourceMappingURL=bundle.js.map

2.5 source-map不常見值

eval-source-map：會(huì)生成sourcemap，但是source-map是以DataUrl添加到eval函數(shù)的后面

inline-source-map：會(huì)生成sourcemap，但是source-map是以DataUrl添加到bundle文件的后面

cheap-source-map（development）：

• 會(huì)生成sourcemap，但是會(huì)更加高效一些（cheap低開銷），因?yàn)樗鼪]有生成列映射（Column Mapping）
• 平常在開發(fā)中，只需要行信息通常就可以定位到錯(cuò)誤了

cheap-module-source-map（development）：

• 會(huì)生成sourcemap，類似于cheap-source-map，但是對(duì)源自loader的sourcemap處理會(huì)更好
• 比如通過 babel-loader來處理，生成的source-map文件會(huì)將一些空行刪掉，無法更好的還原，此時(shí)可以使用此選項(xiàng)

hidden-source-map：

• 會(huì)生成sourcemap，但是不會(huì)對(duì)source-map文件進(jìn)行引用
• 相當(dāng)于刪除了打包文件中對(duì)sourcemap的引用注釋

如果我們手動(dòng)添加進(jìn)來，那么sourcemap就會(huì)生效了

//# sourceMappingURL=bundle.js.map

nosources-source-map：會(huì)生成sourcemap，但是生成的sourcemap只有錯(cuò)誤信息的提示，不會(huì)生成源代碼文件

組合值

組合的規(guī)則如下：

• inline-|hidden-|eval：三個(gè)值時(shí)三選一
• nosources：可選值
• cheap可選值，并且可以跟隨module的值

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

2.6 source-map最佳實(shí)踐

開發(fā)階段：推薦使用 source-map 或者 cheap-module-source-map

• 這分別是vue和react使用的值，可以獲取調(diào)試信息，方便快速開發(fā)

測試階段：推薦使用 source-map 或者 cheap-module-source-map

• 測試階段我們也希望在瀏覽器下看到正確的錯(cuò)誤提示

發(fā)布階段：false、缺省值（不寫）

以上就是Webpack source map示例分析詳解的詳細(xì)內(nèi)容，更多關(guān)于Webpack source map的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論