最近遇到一種新的情況：
在開發(fā)釘釘企業(yè)應(yīng)用時(shí)葛超，遇到Android手機(jī) 在釘釘內(nèi)部無法打開VUE項(xiàng)目暴氏，部分IOS在釘釘內(nèi)部打開為空白頁，解決方法如下：
將config/index.js 文件中的 devtool:'#source-map'? 改成：devtool: 'inline-cheap-module-source-map'
這么修改的原因不得不提及webpack sourcemap選項(xiàng)的配置了绣张，介紹如下答渔，希望大家閱讀之后有所收獲：
先一項(xiàng)一項(xiàng)來看：
eval?文檔上解釋的很明白，每個(gè)模塊都封裝到 eval 包裹起來侥涵，并在后面添加?//# sourceURL
source-map?這是最原始的 source-map 實(shí)現(xiàn)方式沼撕，其實(shí)現(xiàn)是打包代碼同時(shí)創(chuàng)建一個(gè)新的 sourcemap 文件， 并在打包文件的末尾添加?//# sourceURL?注釋行告訴 JS 引擎文件在哪兒
hidden-source-map?文檔上也說了芜飘，就是 soucremap 但沒注釋务豺，沒注釋怎么找文件呢？貌似只能靠后綴嗦明，譬如?xxx/bundle.js?文件笼沥，某些引擎會(huì)嘗試去找?xxx/bundle.js.map
inline-source-map?為每一個(gè)文件添加 sourcemap 的 DataUrl，注意這里的文件是打包前的每一個(gè)文件而不是最后打包出來的，同時(shí)這個(gè) DataUrl 是包含一個(gè)文件完整 souremap 信息的 Base64 格式化后的字符串奔浅，而不是一個(gè) url馆纳。
eval-source-map?這個(gè)就是把?eval?的 sourceURL 換成了完整 souremap 信息的 DataUrl
cheap-source-map?不包含列信息，不包含 loader 的 sourcemap汹桦，（譬如 babel 的 sourcemap）
cheap-module-source-map?不包含列信息鲁驶，同時(shí) loader 的 sourcemap 也被簡化為只包含對(duì)應(yīng)行的。最終的 sourcemap 只有一份舞骆，它是 webpack 對(duì) loader 生成的 sourcemap 進(jìn)行簡化钥弯，然后再次生成的。
webpack 不僅支持這 7 種督禽，而且它們還是可以任意組合的脆霎，就如文檔所說，你可以設(shè)置 souremap 選項(xiàng)為?cheap-module-inline-source-map赂蠢。
這么多模式绪穆，到底該用哪個(gè)？
cheap-module-eval-source-map?絕大多數(shù)情況下都會(huì)是最好的選擇虱岂，這也是下版本 webpack 的默認(rèn)選項(xiàng)。
相關(guān)解釋：
大部分情況我們調(diào)試并不關(guān)心列信息菠红，而且就算 sourcemap 沒有列第岖，有些瀏覽器引擎（例如 v8） 也會(huì)給出列信息，所以我們使用 cheap 模式可以大幅提高 souremap 生成的效率试溯。
使用 eval 方式可大幅提高持續(xù)構(gòu)建效率蔑滓，參考webapck devtool 文檔下方速度對(duì)比表格，這對(duì)經(jīng)常需要邊改邊調(diào)的前端開發(fā)而言遇绞，非常重要键袱！
使用 module 可支持 babel 這種預(yù)編譯工具（在 webpack 里做為 loader 使用）。
eval-source-map?使用 DataUrl 本身包含完整 sourcemap 信息摹闽，并不需要像?sourceURL?那樣蹄咖，瀏覽器需要發(fā)送一個(gè)完整請(qǐng)求去獲取 sourcemap 文件，這會(huì)略微提高點(diǎn)效率
