什么是source-map

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

設置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',},// 設置為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'} }

關閉source-map后打包，打包后生成bundle.js

打開source-map

devtool: "source-map"

打包后的模塊在模塊后面會對應引用一個.map文件，同時在打包好的目錄下會針對每一個模塊生成相應的.map文件
多出.map文件，方便在調試時定位錯誤

inline-source-map

devtool: "inline-source-map"

不會生成.map文件，source-map以base64形式放到js文件里

cheap

devtool: "cheap"

cheap報錯提示信息只精確到行，不用精確到列，性能更好

module

devtool: "module"

module模式會對三方庫、loader等的也負責

eval

devtool: "eval"

eval會將每一個module模塊，執行eval，執行后不會生成sourcemap文件，僅僅是在每一個模塊后，增加sourceURL來關聯模塊處理前后的對應關系
eval通過eval來執行，性能最快，但是復雜的代碼可能顯示不全

總結

模式特性

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

在實際應用中根據需求來組合使用

在dev環境中我們使用：cheap-module-eval-source-map
在prd環境中我們使用：cheap-module-source-map

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。