webpack@4.32.2研究筆記【03】- devtool

wangtdgoodluck 發布于2019-08-23 18:01 / 2012人閱讀

摘要：簡介選項用于控制是否需要生成，以及如何生成。表示把每一個模塊文件都轉換為字符串，并且在每一個模塊代碼的尾部添加文件名，并使用執行。通過來處理已有的。優點是不需要建立和部署內網的服務器，缺點是無法直接線上源碼。

簡介

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

什么是source map？

? source map 一個存儲源代碼與編譯代碼對應位置的映射信息文件，它是專門給調試器準備的，它主要用于debug，目前我所知的只有Google Dev Tools 和 Fire Fox Debugger 支持source map。

? Google Dev Tools 可以通過以下方式打開JavaScript的source map 和 CSS的source map：

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

演示

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

eval

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

1、編寫入口文件和依賴代碼

2、編寫webpack配置 & 啟動webpack

const webpack = require("webpack");

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

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

webpack運行結果：

打包輸出的main.js文件

? 從打包出來的main.js文件中我們可以發現index.js文件和role.js文件的所有代碼都被轉換成了字符串，使用eval進行執行，代碼的最后面都加上了//# sourceURL 指向原始文件的位置，這種模式并不會輸出map文件。

瀏覽器運行結果：

? 從瀏覽器的運行結果中，左側多了一個webpack://，其實這個就是//# sourceURL設置值，如果我們在代碼中修改了這個名字，那么瀏覽器就會顯示的是另外一個名字，如果刪除它，那么它的源碼映射就會消失。而且它映射到的每一個源文件的頭部都會加上一段webpack的代碼，這對于我們來說并不友好，這種模式我使用的頻率相當少。

cheap-module-source-map

? 沒有列映射的source map，同時loader的source map也會被簡化為每行一個映射，這個配置比較適合在開發環境使用，react腳手架開發模式下也是使用這個配置。

1、安裝css-loader

npm i -D css-loader

2、修改webpack配置

3、創建main.css文件

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

4、src/index.js導入main.css

5、運行webpack

source-map

? source-map 適合在生產環境中使用，它會生成一個源代碼對應的.map文件，這個文件描述的打包后的代碼和源代碼的映射關系。代碼上線時不能把這個文件上傳到線上服務器，可以把它上傳到一個只可以內網訪問服務器上，這樣只要你是在公司內網環境內就可以很方便的進行線上問題定位。

1、將devtool修改source-map

const webpack = require("webpack");

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

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

運行webpack后，可以看到dist文件夾下會多出一個main.js.map文件，這個就是source map源碼映射文件

2、將main.js.map文件上傳到內網服務器

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

4、在瀏覽器中運行webpack打包出來的main.js文件

已經成功的跟源碼建立了映射，如果此時我把內網的服務器關掉，看看會發生什么事情？

可以發現如果內網服務器關閉了，Google Dev Tools就找不到main.js.map映射文件了，此時瀏覽器就沒有源碼映射了，但是也不會報錯。

nosources-source-map

? nosources-source-map會生成一個沒有源碼的source map映射，僅僅可以用來映射瀏覽器上的堆棧跟蹤，而不會暴露源碼，這配置選項也很適用生產環境。例如：當你線上環境的代碼如果出問題了，報錯信息能夠告訴我是在哪個文件的哪一行出現問題了，但是我又不想把我的源碼暴露出去，就可以使用這種模式。

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

第二步：在role.js文件里制作一個錯誤

第三步：瀏覽運行

? 從運行結果可以發現，報錯信息詳細的描述了是我哪個源碼文件的第幾行報錯了，但是瀏覽器卻看不到任何的源碼。

錯誤示范：不能同時設置devtool和SourceMapDevToolPlugin

同時設置devtool和SourceMapDevToolPlugin插件

運行webpack：

打開打包出來的main.js文件，可以看到會同時設置了兩個sourceMappingURL：

這樣會導致source map映射失效：

如果只設置devtool或者SourceMapDevToolPlugin其中的一個，那么source map就可以正常運行了。

總結

? 可以使用 SourceMapDevToolPlugin 插件進行更細粒度的配置。通過 source-map-loader 來處理已有的 source map。

? ??注意：devtool的默認值為false，如果傳入的不是webpack的可選參數或者false會導致webpack運行報錯

? source-map：在生產環境使用，但是必須需要使用SourceMapDevToolPlugin插件進行設置，并且不能使用devtool選項，需要把source-map文件發布一臺內網服務器，這樣只有開發人員能夠看到源碼映射，外網的人是無法看到的。

? nosources-source-map：在生產環境使用，這個選項只有堆棧的映射跟蹤，不會暴露源碼，方便錯誤定位。優點是：不需要建立和部署內網的source map服務器，缺點是：無法直接線上debug源碼。

? cheap-module-source-map：在開發環境使用

? 這是官網上所有devtool的配置說明，感興趣的同學可以對每個選項進行嘗試。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104542.html

webpack@4.32.2研究筆記【01】- 零配置

摘要：核心概念是一個前端資源模塊打包工具，它可以根據模塊的依賴關系進行打包輸出成瀏覽器能夠識別的靜態資源，可以把多個文件打包成一個，減少請求。源碼地址零配置啟動從開始，可以零配置啟動，命令被遷移到一個單獨的包上，的功能變得更加豐富強大。核心概念 ? webpack是一個前端資源模塊打包工具，它可以根據模塊的依賴關系進行打包輸出成瀏覽器能夠識別的靜態資源，可以把多個文件打包成一...

littleGrow 2019-08-26 13:56 評論0 收藏0
webpack@4.32.2研究筆記【02】- mode

摘要：簡介模式是新增的配置，用來指定使用對應模式的內置優化它有三個可選模式默認為。源碼地址選項描述通過插件將的值設為。啟用和通過插件將的值設為。使用默認的優化項。注意上面說的并不是的運行環境變量，它其實是通過插件設置的一個全局變量。簡介 ? mode（模式）是webpack4.0.0新增的配置，用來指定webpack使用對應模式的內置優化；它有三個可選模式：producti...

newtrek 2019-08-23 17:51 評論0 收藏0
spring boot學習(6)— 配置信息及其讀取優先級

摘要：優先級如下使用文件使用文件，會根據以下目錄去尋找，添加到中，優先級依次遞增。目錄下目錄工程根目錄工程跟目錄下的目錄加載順序從優先級高的先加載。屬性值怎么取優先級高的會覆蓋優先級低的。但是在同等目錄下，優先級高于文件的配置信息。 1. properties 信息從哪里取在不同的環境，我們需要使用不同的配置，Spring boot 已經提供了相關功能，可以是 properties 文件，...

stormzhang 2019-08-16 16:15 評論0 收藏0
有哪些 JS 調試技巧——devtool，以及安裝問題的解決

摘要：試試年年初出的調試神器基于將和的功能融合在了一起。直接命令行下啟動，替代命令和在下沒有交互的。解決方法在最下面。小技巧另外啟動調試可以用這樣可以監聽文件變化自動，以及在文件開頭自動以便打斷點調試。轉自本人知乎回答作者：mdluo鏈接：https://www.zhihu.com/question/20260762/answer/89388634來源：知乎著作權歸作者所有。商業轉載請聯...

gaomysion 2019-08-19 18:47 評論0 收藏0