webpack之devtool的示例分析

這篇文章主要介紹webpack之devtool的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

關(guān)于Devtool

該選項控制是否以及如何生成源映射。官網(wǎng)上給出的可選值有：

其中一些值適合開發(fā)，一些用于生產(chǎn)。對于開發(fā)，您通常需要快速的Source Maps，以bundle的大小為代價，但是對于生產(chǎn)，您需要獨立的Source Maps，這是精確的，并且支持最小化。

選擇一種源映射樣式，以增強(qiáng)調(diào)試過程。這些值可以顯著地影響構(gòu)建和重建速度。而不是使用devtool選項還可以使用SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin直接有了更多的選擇。不要同時使用devtool選項和插件。devtool選項在內(nèi)部添加了插件，所以你最終會得到應(yīng)用兩次的插件。

實例詳解

1.新建print.js

export default function printMe() {
 console.log('武昌魚@222');
}

2.新建index.js

import printMe from './print.js';
function component() {
 var element = document.createElement('div');
 var btn = document.createElement('button');
 btn.innerHTML = 'Click 1me and check 1the console!';
 btn.onclick = printMe;
 element.appendChild(btn);
 return element;
}
document.body.appendChild(component());

3.新建webpack.config.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry: './src/index.js',
 output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({
   title: ' webpack之devtool'
  })
 ]
};

4.使用不同的devtool選項

 none

打包后點擊打印按鈕，console顯示main.js:96，生成代碼如下所示：

eval

eval 模式會把每個 module 封裝到 eval 里包裹起來執(zhí)行，并且會在末尾追加注釋。

Each module is executed withevaland//@ sourceURL.

打包之后點擊打印按鈕，console顯示print.js:3，生成代碼如下所示：

source-map

打包之后你會發(fā)現(xiàn)你的 output 目錄下多了一個 index.js.map 文件，此文件記錄了sourceMap 行列信息如何映射源代碼的信息。點擊打印按鈕，console顯示print.js:3，生成代碼如下所示：

main.js

main.js.map

hidden-source-map

打包后main.js與 source-map 選項相比少了末尾注釋，但 output 目錄下的 index.js.map 沒有少。點擊打印按鈕，console顯示main.js:96。

inline-source-map

打包后可以看到末尾的注釋 sourceMap 作為 DataURL 的形式被內(nèi)嵌進(jìn)了 bundle中，由于 sourceMap 的所有信息都被加到了bundle中，整個 bundle 文件變得碩大無比。點擊打印按鈕，console顯示print.js:3，生成代碼如下所示：

main.js

eval-source-map

和 eval 類似，但是把注釋里的 sourceMap 都轉(zhuǎn)為了 DataURL。console顯示print.js?dc38:2，生成代碼如下所示：

main.js

cheap-source-map

和 source-map 生成結(jié)果差不多。output 目錄下的index.js內(nèi)容一樣。但是 cheap-source-map 生成的 index.js.map 的內(nèi)容卻比 source-map 生成的 index.js.map 要少很多代碼，我們對比一下上文 source-map 生成的 index.js.map 的結(jié)果，發(fā)現(xiàn) source 屬性里面少了列信息，如下所示：

main.js.map

cheap-module-source-map

在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提高了打包速度，但是也使得瀏覽器開發(fā)者工具只能對應(yīng)到具體的行，不能對應(yīng)到具體的列（符號），會對調(diào)試造成不便；

總結(jié)

 開發(fā)環(huán)境推薦使用：

1.eval ：每個模塊使用eval()和//@ sourceURL執(zhí)行。這是非?？臁Ｖ饕秉c是，它沒有正確顯示行號，因為它被映射到轉(zhuǎn)換代碼而不是原始代碼(沒有來自加載器的源映射)。

2.eval-source-map：每個模塊使用eval()執(zhí)行，而SourceMap作為DataUrl添加到eval()中。最初它是緩慢的，但是它提供快速的重建速度和產(chǎn)生真實的文件。行號被正確映射，因為它被映射到原始代碼。它產(chǎn)生了最優(yōu)質(zhì)的開發(fā)資源。

3.cheap-eval-source-map：與eval-source-map類似，每個模塊都使用eval()執(zhí)行。它沒有列映射，它只映射行號。它忽略了來自加載器的源代碼，并且只顯示與eval devtool相似的經(jīng)過轉(zhuǎn)換的代碼。

4.cheap-module-eval-source-map：類似于cheap-eval-source-map，在本例中，來自加載器的源映射被處理以獲得更好的結(jié)果。然而，加載器源映射被簡化為每一行的單個映射。

生產(chǎn)環(huán)境推薦使用：

1.(none) ：(省略devtool選項)-不觸發(fā)SourceMap。這是一個很好的選擇。

2.source-map：一個完整的SourceMap是作為一個單獨的文件。它為bundle 添加了引用注釋，因此開發(fā)工具知道在哪里找到它。

3.hidden-source-map：與source-map相同，但不向bundle 添加引用注釋。如果您只希望SourceMaps從錯誤報告中映射錯誤堆棧跟蹤，但不想為瀏覽器開發(fā)工具暴露您的SourceMap，可以使用此選項。

4.nosources-source-map：一個SourceMap是在沒有源代碼的情況下創(chuàng)建的。它可以用于在客戶機(jī)上映射堆棧跟蹤，而不暴露所有源代碼。您可以將源映射文件部署到webserver。

以上是“webpack之devtool的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！