SourceMap是一種映射關系，當專案運行后，如果出現錯誤，我們可以利用sourceMap反向定位到原始碼，
const path = require('path');
module.exports = {
devtool: 'none', // SourceMap的模式（見下表）
entry: './src/index.js', // 入口檔案
output: {
filename: 'bundle.js', // 檔案名
path: path.resolve(__dirname, 'dist') // 檔案夾
}
}
SourceMap不同模式的特點（見下表）
| 模式 | 解釋 |
|---|---|
| eval | 每個module會封裝到 eval 里包裹起來執行，并且會在末尾追加注釋 //@ sourceURL. |
| source-map | 生成一個SourceMap檔案（編譯速度最慢） |
| hidden-source-map | 和 source-map 一樣，但不會在 bundle 末尾追加注釋. |
| inline-source-map | 生成一個 DataUrl 形式的 SourceMap 檔案. |
| eval-source-map | 每個module會通過eval()來執行，并且生成一個DataUrl形式的SourceMap. |
| cheap-source-map | 生成一個沒有列資訊（column-mappings）的SourceMaps檔案，不包含loader的 sourcemap（譬如 babel 的 sourcemap） |
| cheap-module-source-map | 生成一個沒有列資訊（column-mappings）的SourceMaps檔案，同時 loader 的 sourcemap 也被簡化為只包含對應行的， |
1. webpack2.0+； webpack配置 devtool: "source-map" 無效，
sourceMap正確配置如下：
const buildConfig = {
mode: "production",
output: {
path: distPath,
filename: "./js/[name].[hash].min.js",
publicPath: "./"
},
plugins: [
new UglifyJSPlugin({ // 1. 這個配置必須
sourceMap: true
}),
].concat(baseConfig.htmlArray),
devtool: "source-map" // 2. 這個配置必須
}
2. webpack4.0+； webpack配置 devtool: "source-map" 生成的map代碼沒有 sourcesContent，沒有sourcesContent的結果是你只能定位要壓縮代碼的位置，無法定位到原始碼的位置
sourceMap 正確配置如下：
const buildConfig = {
mode: "production",
output: {
path: distPath,
filename: "./js/[name].[hash].min.js",
publicPath: "./"
},
optimization: { // 1. 這個配置必須
minimize: false
},
plugins: [
].concat(baseConfig.htmlArray),
devtool: "source-map" // 2. 這個配置必須
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/262569.html
標籤：其他
上一篇：git基礎的常用命令