摘要：簡(jiǎn)介選項(xiàng)用于控制是否需要生成，以及如何生成。表示把每一個(gè)模塊文件都轉(zhuǎn)換為字符串，并且在每一個(gè)模塊代碼的尾部添加文件名，并使用執(zhí)行。通過(guò)來(lái)處理已有的。優(yōu)點(diǎn)是不需要建立和部署內(nèi)網(wǎng)的服務(wù)器，缺點(diǎn)是無(wú)法直接線(xiàn)上源碼。

? devtool選項(xiàng)用于控制是否需要生成source map，以及如何生成source map。源碼地址

? source map 一個(gè)存儲(chǔ)源代碼與編譯代碼對(duì)應(yīng)位置的映射信息文件，它是專(zhuān)門(mén)給調(diào)試器準(zhǔn)備的，它主要用于debug，目前我所知的只有Google Dev Tools 和 Fire Fox Debugger 支持source map。

? Google Dev Tools 可以通過(guò)以下方式打開(kāi)JavaScript的source map 和 CSS的source map：

? source map主要用于將壓縮混淆后的JavaScript代碼和CSS代碼映射到源碼中，方便debug調(diào)試。更多關(guān)于source map的知識(shí)，大家可以參考阮一峰大神的文章：JavaScript Source Map 詳解

? 最新的webpack官網(wǎng)中一共有13種devtool可選模式，不同的模式打包輸出的代碼和source map以及構(gòu)建的速度都不一樣，下面我演示幾種比較常用的devtool模式。

? 表示把每一個(gè)模塊文件都轉(zhuǎn)換為字符串，并且在每一個(gè)模塊代碼的尾部添加 //# sourceURL=webpack:/// 文件名.js，并使用eval執(zhí)行。

1、編寫(xiě)入口文件和依賴(lài)代碼

2、編寫(xiě)webpack配置 & 啟動(dòng)webpack

const webpack = require("webpack");

// 創(chuàng)建編譯器對(duì)象
const compiler = webpack({
  mode: "development",
  devtool: "eval"
});

// 啟動(dòng)webpack
compiler.run((err, stats) => {
  if (err) {
    console.error(err);
    return;
  }
  // 輸出編譯成功信息
  console.log(stats.toString({ colors: true }));
});

webpack運(yùn)行結(jié)果：

打包輸出的main.js文件

? 從打包出來(lái)的main.js文件中我們可以發(fā)現(xiàn)index.js文件和role.js文件的所有代碼都被轉(zhuǎn)換成了字符串，使用eval進(jìn)行執(zhí)行，代碼的最后面都加上了//# sourceURL 指向原始文件的位置，這種模式并不會(huì)輸出map文件。

瀏覽器運(yùn)行結(jié)果：

? 從瀏覽器的運(yùn)行結(jié)果中，左側(cè)多了一個(gè)webpack://，其實(shí)這個(gè)就是//# sourceURL設(shè)置值，如果我們?cè)诖a中修改了這個(gè)名字，那么瀏覽器就會(huì)顯示的是另外一個(gè)名字，如果刪除它，那么它的源碼映射就會(huì)消失。而且它映射到的每一個(gè)源文件的頭部都會(huì)加上一段webpack的代碼，這對(duì)于我們來(lái)說(shuō)并不友好，這種模式我使用的頻率相當(dāng)少。

? 沒(méi)有列映射的source map，同時(shí)loader的source map也會(huì)被簡(jiǎn)化為每行一個(gè)映射，這個(gè)配置比較適合在開(kāi)發(fā)環(huán)境使用，react腳手架開(kāi)發(fā)模式下也是使用這個(gè)配置。

1、安裝css-loader

npm i -D css-loader

2、修改webpack配置

3、創(chuàng)建main.css文件

body {
    background-color: greenyellow;
    color: red;
}

4、src/index.js導(dǎo)入main.css

5、運(yùn)行webpack

? source-map 適合在生產(chǎn)環(huán)境中使用，它會(huì)生成一個(gè)源代碼對(duì)應(yīng)的.map文件，這個(gè)文件描述的打包后的代碼和源代碼的映射關(guān)系。代碼上線(xiàn)時(shí)不能把這個(gè)文件上傳到線(xiàn)上服務(wù)器，可以把它上傳到一個(gè)只可以?xún)?nèi)網(wǎng)訪(fǎng)問(wèn)服務(wù)器上，這樣只要你是在公司內(nèi)網(wǎng)環(huán)境內(nèi)就可以很方便的進(jìn)行線(xiàn)上問(wèn)題定位。

1、將devtool修改source-map

const webpack = require("webpack");

// 創(chuàng)建編譯器對(duì)象
const compiler = webpack({
  mode: "development",
  devtool: "source-map"
});

// 啟動(dòng)webpack
compiler.run((err, stats) => {
  if (err) {
    console.error(err);
    return;
  }
  // 輸出編譯成功信息
  console.log(stats.toString({ colors: true }));
});

運(yùn)行webpack后，可以看到dist文件夾下會(huì)多出一個(gè)main.js.map文件，這個(gè)就是source map源碼映射文件

2、將main.js.map文件上傳到內(nèi)網(wǎng)服務(wù)器

3、修改sourceMappingURL映射文件的路徑

4、在瀏覽器中運(yùn)行webpack打包出來(lái)的main.js文件

已經(jīng)成功的跟源碼建立了映射，如果此時(shí)我把內(nèi)網(wǎng)的服務(wù)器關(guān)掉，看看會(huì)發(fā)生什么事情？

可以發(fā)現(xiàn)如果內(nèi)網(wǎng)服務(wù)器關(guān)閉了，Google Dev Tools就找不到main.js.map映射文件了，此時(shí)瀏覽器就沒(méi)有源碼映射了，但是也不會(huì)報(bào)錯(cuò)。

? nosources-source-map會(huì)生成一個(gè)沒(méi)有源碼的source map映射，僅僅可以用來(lái)映射瀏覽器上的堆棧跟蹤，而不會(huì)暴露源碼，這配置選項(xiàng)也很適用生產(chǎn)環(huán)境。例如：當(dāng)你線(xiàn)上環(huán)境的代碼如果出問(wèn)題了，報(bào)錯(cuò)信息能夠告訴我是在哪個(gè)文件的哪一行出現(xiàn)問(wèn)題了，但是我又不想把我的源碼暴露出去，就可以使用這種模式。

第一步：將devtool修改為nosources-source-map

第二步：在role.js文件里制作一個(gè)錯(cuò)誤

第三步：瀏覽運(yùn)行

? 從運(yùn)行結(jié)果可以發(fā)現(xiàn)，報(bào)錯(cuò)信息詳細(xì)的描述了是我哪個(gè)源碼文件的第幾行報(bào)錯(cuò)了，但是瀏覽器卻看不到任何的源碼。

同時(shí)設(shè)置devtool和SourceMapDevToolPlugin插件

運(yùn)行webpack：

打開(kāi)打包出來(lái)的main.js文件，可以看到會(huì)同時(shí)設(shè)置了兩個(gè)sourceMappingURL：

這樣會(huì)導(dǎo)致source map映射失效：

如果只設(shè)置devtool或者SourceMapDevToolPlugin其中的一個(gè)，那么source map就可以正常運(yùn)行了。

? 可以使用 SourceMapDevToolPlugin 插件進(jìn)行更細(xì)粒度的配置。通過(guò) source-map-loader 來(lái)處理已有的 source map。

? ??注意：devtool的默認(rèn)值為false，如果傳入的不是webpack的可選參數(shù)或者false會(huì)導(dǎo)致webpack運(yùn)行報(bào)錯(cuò)

? source-map：在生產(chǎn)環(huán)境使用，但是必須需要使用SourceMapDevToolPlugin插件進(jìn)行設(shè)置，并且不能使用devtool選項(xiàng)，需要把source-map文件發(fā)布一臺(tái)內(nèi)網(wǎng)服務(wù)器，這樣只有開(kāi)發(fā)人員能夠看到源碼映射，外網(wǎng)的人是無(wú)法看到的。

? nosources-source-map：在生產(chǎn)環(huán)境使用，這個(gè)選項(xiàng)只有堆棧的映射跟蹤，不會(huì)暴露源碼，方便錯(cuò)誤定位。優(yōu)點(diǎn)是：不需要建立和部署內(nèi)網(wǎng)的source map服務(wù)器，缺點(diǎn)是：無(wú)法直接線(xiàn)上debug源碼。

? cheap-module-source-map：在開(kāi)發(fā)環(huán)境使用

? 這是官網(wǎng)上所有devtool的配置說(shuō)明，感興趣的同學(xué)可以對(duì)每個(gè)選項(xiàng)進(jìn)行嘗試。