webpack學習筆記(三) source map

時間 2019-11-13

標籤 webpack 學習筆記 source map 简体版

原文原文鏈接

source map 是一種可以將處理後的代碼映射回源代碼的工具，能夠幫助咱們追蹤錯誤在源代碼中的位置javascript

這篇文章，咱們將會講解在 webpack 中經過 devtool 選項配置使用 source map 的一些事情html

一、存在問題

首先咱們來看一下，在不使用 source map 的狀況下，項目開發會出現什麼問題java

建立一個空文件夾 Demo 做爲項目的根目錄，在該目錄下使用命令安裝項目的所需依賴node

> # 建立 package.json
> npm init -y
> # 安裝 webpack
> npm install --save-dev webpack
> npm install --save-dev webpack-cli

而後咱們在根目錄下建立 dist 和 src 目錄，並在相應的目錄下建立相應的文件，最終的目錄結構以下webpack

Demo
    - package.json
    - package-lock.json
    - webpack.config.js
    + node_modules
    + src
        - index.js
        - hello.js
        - goodbye.js
    + dist
        - index.html

webpack.config.js 文件內容，指定 webpack 的一些基本配置web

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

/dist/index.html 文件內容，這裏只是簡單地寫了一個 HTML 模板，引入打包以後的 bundle.js 文件shell

<!doctype html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>

/src/index.js 文件內容，在 index.js 文件中引入 hello.js 文件和 goodbye.js 文件npm

import { SayHello } from './hello.js'
import { SayGoodbye } from './goodbye.js'

SayHello()
SayGoodbye()

/src/hello.js 文件內容，hello.js 文件導出一個函數，做用是在控制檯打印日誌信息json

export function SayHello() {
    console.log('Hello World')
}

/src/goodbye.js 文件內容，goodbye.js 文件導出一個函數，做用是在控制檯打印錯誤信息瀏覽器

export function SayGoodbye() {
    console.error('Goodbye World')
}

而後運行構建命令，以 index.js 爲入口構建模塊依賴圖，將全部依賴的文件打包後輸出到 bundle.js 文件

> npx webpack --config webpack.config.js

以後，在瀏覽器打開 /dist/index.html 文件，在控制檯應該能夠看到這樣的信息

Hello World                                                         bundle.js:9
Goodbye World                                                       bundle.js:9

因爲項目中全部的源代碼都被打包成一個 bundle.js 文件

因此堆棧跟蹤也只是簡單地指向 bundle.js，沒法精肯定位到具體哪一個文件，這對咱們調試可能沒有太大的幫助

二、解決問題

那要怎麼辦呢？好了，這個時候就要輪到 source map 登場啦！

它能夠將打包後的代碼映射爲原始的代碼，在發生錯誤時明確指出到底是哪一個文件發生錯誤

webpack 中經過 devtool 選項指定如何生成 source map，咱們修改 webpack.config.js 文件內容以下

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: 'cheap-module-eval-source-map'
};

而後，從新運行構建命令

> npx webpack --config webpack.config.js

打開 /dist/index.html 文件，在控制檯應該能夠看到打印的信息以下

Hello World                                                         hello.js?0278:2
Goodbye World                                                     goodbye.js?de2d:2

這時候，打印的日誌信息和錯誤信息終於都指向原始的代碼文件啦

三、可選值

事實上， devtool 有不少不一樣的可選值，選擇不一樣的值會明顯影響到堆棧跟蹤和構建速度

對於開發環境，咱們一般但願 更快速 的 source map，這就須要 source map 添加到 bundle 中進去
對於生產環境，咱們一般但願 更精準 的 source map，這就須要 source map 從 bundle 中分離出來

devtool 選項的可選值以下：

devtool	構建速度	從新構建速度	使用環境
eval	很是快	很是快	開發環境
eval-source-map	慢	比較快	開發環境
cheap-eval-source-map	比較快	快	開發環境
cheap-module-eval-source-map	通常	快	開發環境
none	很是快	很是快	生產環境
source-map	慢	慢	生產環境
hidden-source-map	慢	慢	生產環境
nosources-source-map	慢	慢	生產環境
inline-source-map	慢	慢	特定場景
cheap-source-map	比較快	通常	特定場景
inline-cheap-source-map	比較快	通常	特定場景
cheap-module-source-map	通常	慢	特定場景
inline-cheap-module-source-map	通常	慢	特定場景

要記住上面這麼多的信息是十分困難的，可是咱們不難發現，上面的不少選項其實都是經過幾個關鍵字拼接出來的

eval：在 bundle.js 文件中，每一個模塊調用 eval 執行，而且存在 sourceUrl 指向原始文件
source-map：經過 sourceMappingURL 指向 bundle.map.js 文件，這個文件與原始文件之間存在映射
eval-source-map：不會生成 map 文件，可是存在 sourceMappingURL 儲存 map 文件的 Base64 編碼
inline-source-map：不會生成 map 文件，在註釋中經過 sourceMappingURL 儲存 map 文件的 Base64 編碼
cheap：調試的代碼不會顯示列位置信息
module：調試的代碼是原始的代碼，不會通過轉換

【閱讀更多 webpack 系列文章，請看 webpack學習筆記】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。