關(guān)于Devtool

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

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

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

實(shí)例詳解

1.新建print.js

export default function printMe() {
 console.log('武昌魚(yú)@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選項(xiàng)

 none

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

eval

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

Each module is executed withevaland//@ sourceURL.

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

source-map

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

main.js

main.js.map

hidden-source-map

打包后main.js與 source-map 選項(xiàng)相比少了末尾注釋，但 output 目錄下的 index.js.map 沒(méi)有少。點(diǎn)擊打印按鈕，console顯示main.js:96。

inline-source-map

打包后可以看到末尾的注釋 sourceMap 作為 DataURL 的形式被內(nèi)嵌進(jìn)了 bundle中，由于 sourceMap 的所有信息都被加到了bundle中，整個(gè) bundle 文件變得碩大無(wú)比。點(diǎn)擊打印按鈕，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 要少很多代碼，我們對(duì)比一下上文 source-map 生成的 index.js.map 的結(jié)果，發(fā)現(xiàn) source 屬性里面少了列信息，如下所示：

main.js.map

cheap-module-source-map

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

總結(jié)

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

1.eval ：每個(gè)模塊使用eval()和//@ sourceURL執(zhí)行。這是非?？臁Ｖ饕秉c(diǎn)是，它沒(méi)有正確顯示行號(hào)，因?yàn)樗挥成涞睫D(zhuǎn)換代碼而不是原始代碼(沒(méi)有來(lái)自加載器的源映射)。

2.eval-source-map：每個(gè)模塊使用eval()執(zhí)行，而SourceMap作為DataUrl添加到eval()中。最初它是緩慢的，但是它提供快速的重建速度和產(chǎn)生真實(shí)的文件。行號(hào)被正確映射，因?yàn)樗挥成涞皆即a。它產(chǎn)生了最優(yōu)質(zhì)的開(kāi)發(fā)資源。

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

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

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

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

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

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

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

最新評(píng)論