什么是source-map

構(gòu)建了處理前的代碼和處理后的代碼之間的橋梁。主要是方便開發(fā)人員的錯(cuò)誤定位。處理是指
壓縮，減小體積將多個(gè)文件合并成同一個(gè)文件，其他語言編譯成javascript，比如TypeScript和CoffeeScript等

設(shè)置dev-tool

const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin') module.exports = {mode: "development",entry: {bundle: './src/index.js',},// 設(shè)置為nonedevtool: "none",module: {rules: [{test: /\.(jpg|png|gif)$/,use: {loader: "url-loader",options: {name: '[name]_[hash].[ext]',outputPath: 'images/',limit: 2048}}},{test: /\.scss$/,use: ['style-loader',{loader: "css-loader",options: {importLoaders: 2 ,modules: true}},'sass-loader','postcss-loader']}]},plugins: [new HtmlWebpackPlugin({template: 'src/index.html'}),new CleanWebpackPlugin()],output: {path: path.resolve(__dirname, 'build'),filename: '[name].js'} }

關(guān)閉source-map后打包，打包后生成bundle.js

打開source-map

devtool: "source-map"

打包后的模塊在模塊后面會對應(yīng)引用一個(gè).map文件，同時(shí)在打包好的目錄下會針對每一個(gè)模塊生成相應(yīng)的.map文件
多出.map文件，方便在調(diào)試時(shí)定位錯(cuò)誤

inline-source-map

devtool: "inline-source-map"

不會生成.map文件，source-map以base64形式放到j(luò)s文件里

cheap

devtool: "cheap"

cheap報(bào)錯(cuò)提示信息只精確到行，不用精確到列，性能更好

module

devtool: "module"

module模式會對三方庫、loader等的也負(fù)責(zé)

eval

devtool: "eval"

eval會將每一個(gè)module模塊，執(zhí)行eval，執(zhí)行后不會生成sourcemap文件，僅僅是在每一個(gè)模塊后，增加sourceURL來關(guān)聯(lián)模塊處理前后的對應(yīng)關(guān)系
eval通過eval來執(zhí)行，性能最快，但是復(fù)雜的代碼可能顯示不全

總結(jié)

模式特性

eval	使用eval包裹模塊代碼
source-map	產(chǎn)生.map文件
cheap	不包含列信息,也不包含loader的sourcemap
module	包含loader、三方庫的sourcemap
inline	將.map作為DataURI嵌入，不單獨(dú)生成.map文件

在實(shí)際應(yīng)用中根據(jù)需求來組合使用

在dev環(huán)境中我們使用：cheap-module-eval-source-map
在prd環(huán)境中我們使用：cheap-module-source-map

總結(jié)

以上是生活随笔為你收集整理的source-map讲解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。