SourceMap
我們在打包中，將開發(fā)環(huán)境中源代碼經(jīng)過壓縮特姐，去空格晶丘，babel編譯轉(zhuǎn)化，最終可以得到適用于生產(chǎn)環(huán)境的項(xiàng)目代碼唐含，這樣處理后的項(xiàng)目代碼和源代碼之間差異性很大浅浮，會造成無法debug的問題。
SourceMap就是為了解決這個(gè)問題而產(chǎn)生的捷枯，簡單的說SourceMap就是一個(gè)映射關(guān)系脑题。他可以將在dist打包輸出的代碼與我們的源代碼之間建立一個(gè)映射，告訴我們打包編譯后的代碼報(bào)錯(cuò)的地方實(shí)際位于我們源代碼中的什么位置铜靶。便于我們進(jìn)行debug
幾種常見的devtool的配置關(guān)鍵詞含義
- source-map：針對項(xiàng)目源代碼建立和編譯后代碼映射管理
- cheap：只針對我們自己的業(yè)務(wù)代碼進(jìn)行映射叔遂，不包含依賴的第三方模塊，同時(shí)映射關(guān)系争剿，只針對到行
- inline：編譯打包后已艰，不生成獨(dú)立的map文件，而是直接將映射關(guān)系蚕苇，打包編譯到入口文件中
- module：對依賴的第三方庫哩掺，也建立相應(yīng)的映射關(guān)系
- eval：執(zhí)行效率最快、性能最好的方式涩笤，他不建立獨(dú)立的映射關(guān)系文件嚼吞，而是通過
eval()函數(shù)盒件，執(zhí)行代碼，并通過注釋鏈接了映射關(guān)系的方式舱禽，來生成映射炒刁。但是針對復(fù)雜度較高的項(xiàng)目，他提示的內(nèi)容誊稚，并不全面翔始。
devtool的最佳實(shí)踐
-
mode: "development"的情況下，使用cheap-module-eval-source-map -
mode: "production"的情況下里伯，使用cheap-module-source-map
