作用

首先来说一下他的作用。
我们在webpack进行打包的时候，如果打包的文件有报错，
我们是没办法得知具体报错在我们哪个文件上，因为他会定位到打包后的文件main.js里面

默认配置

:::info 但实际sourceMap的默认配置已经帮我们做了这样的功能，
所以就算不设置sourceMap也可以定位到具体的正确文件 :::

image.png
什么配置都没加，还是能正确定位到index.js

  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  6. module.exports = {
  7.   mode: 'development',
  8.   entry: {
  9.     // 在entry对象中，创建两个入口文件
  10.     main: './src/index.js'
  11.   },
  12.   module: {
  13.     rules:[
  14.       {
  15.         test: /\.(jpg|png|gif)$/,
  16.         use:{
  17.           loader: 'url-loader',
  18.           options: {
  19.             name:'[name]_[hash].[ext]',
  20.             outputPath: 'images/',
  21.             limit: 2048 // 2kb
  22.           }
  23.         }
  24.       },
  25.       {
  26.         test: /\.scss$/,
  27.         use:[
  28.           'style-loader', 
  29.           {
  30.             loader:'css-loader',
  31.             options: {
  32.               importLoaders: 2
  33.             }
  34.           },
  35.           'sass-loader',
  36.           'postcss-loader'
  37.         ]
  38.       }
  39.     ]
  40.   },
  41.   plugins:[new HtmlWebpackPlugin({
  42.     template: 'src/index.html'
  43.   }), new CleanWebpackPlugin()], 
  44.   output: {
  45.     filename: '[name].js',
  46.     path: path.resolve(__dirname, 'dist')
  47.   }
  48. }

image.png

不设置sourceMap

假设我们把sourceMap设置为none看一下。 :::info devtool 此选项控制是否生成，以及如何生成 source map :::

在我配置devtool: ‘none’时发现报错：.devtool should match pattern “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”. 从 Webpack 4 迁移到 Webpack 5 时，使用devtool空值时出现错误（仅在生产模式下）。 具体参考 但是经过测试虽然可以使用，但是问题依旧存在， 例如devtool:process.env.NODE_ENV === ‘development’?’source-map’:false, 但并没有执行source-map,而是执行false

:::info 所以，可以直接使用devtool:false :::

devtool为false

  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  5. // 获取环境配置
  6. // const isDev = process.env.NODE_ENV === 'development'
  8. module.exports = {
  9.   mode: 'development',
  10.   devtool: false,
  11.   entry: {
  12.     // 在entry对象中，创建两个入口文件
  13.     main: './src/index.js'
  14.   },
  15.   module: {
  16.     rules:[
  17.       {
  18.         test: /\.(jpg|png|gif)$/,
  19.         use:{
  20.           loader: 'url-loader',
  21.           options: {
  22.             name:'[name]_[hash].[ext]',
  23.             outputPath: 'images/',
  24.             limit: 2048 // 2kb
  25.           }
  26.         }
  27.       },
  28.       {
  29.         test: /\.scss$/,
  30.         use:[
  31.           'style-loader', 
  32.           {
  33.             loader:'css-loader',
  34.             options: {
  35.               importLoaders: 2
  36.             }
  37.           },
  38.           'sass-loader',
  39.           'postcss-loader'
  40.         ]
  41.       }
  42.     ]
  43.   },
  44.   plugins:[new HtmlWebpackPlugin({
  45.     template: 'src/index.html'
  46.   }), new CleanWebpackPlugin()], 
  47.   output: {
  48.     filename: '[name].js',
  49.     path: path.resolve(__dirname, 'dist')
  50.   }
  51. }

这个时候我们就能发现，如果没有配置source map,是没办法定位到我们的index.js文件的。
image.png

sourceMap的理解

:::info 现在我们讲一下sourceMap是什么：
他是一个映射关系，他知道dist目录下的main.js文件的代码行对应scr中index.js中的第几行。
所以我们配置他可以直接映射出index.js中哪一行报错。 :::

  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  6. module.exports = {
  7.   mode: 'development',
  8.   // source-map会帮我们找到报错的具体位置
  9.   devtool: 'source-map',
  10.   entry: {
  11.     main: './src/index.js'
  12.   },
  13.   module: {
  14.     rules:[
  15.       {
  16.         test: /\.(jpg|png|gif)$/,
  17.         use:{
  18.           loader: 'url-loader',
  19.           options: {
  20.             name:'[name]_[hash].[ext]',
  21.             outputPath: 'images/',
  22.             limit: 2048 // 2kb
  23.           }
  24.         }
  25.       },
  26.       {
  27.         test: /\.scss$/,
  28.         use:[
  29.           'style-loader', 
  30.           {
  31.             loader:'css-loader',
  32.             options: {
  33.               importLoaders: 2
  34.             }
  35.           },
  36.           'sass-loader',
  37.           'postcss-loader'
  38.         ]
  39.       }
  40.     ]
  41.   },
  42.   plugins:[new HtmlWebpackPlugin({
  43.     template: 'src/index.html'
  44.   }), new CleanWebpackPlugin()], 
  45.   output: {
  46.     filename: '[name].js',
  47.     path: path.resolve(__dirname, 'dist')
  48.   }
  49. }

image.png
image.png
这里面的main.js.map就是webpack帮我们在源代码和打包的代码做的映射文件。

source map的一些配置项

:::info 使用source map的一些配置项，会导致页面的打包速度变慢。 ::: image.png :::info 我们讲一下： eval 、 cheap、 module、inline的作用 :::

inline

:::info 我们可以看到设置inline后，main.js.map文件消失了。
原因是使用inline打包，我们的map文件会通过data:url的方式直接写在main.js里面进行映射。 ::: image.png
image.png

cheap

:::info 他打包出来和我们刚刚使用inline表面上没有任何区别，映射文件还是放在main.js的内部。 ::: 具体作用：

  1. 但我们项目的代码量很大的时候，如果我们的代码出了错误，而且我们又没有使用cheap,那么sourceMap会告诉我们，我们的代码在第几行的第几个字符的地方报错，他会更加精确的告诉你位置。 但是，这样子精确的映射会比较耗费性能，一般报错我们只需要知道第几行报错就可以了，我们基本就可以排查到问题。加上cheap的意思就是让soureMap告诉我们报错的时候只返回报错的行数就可以了。
  2. 他只会映射我们应用代码，也就是说不会去映射一些第三方模块 如果使用了cheap的同时又希望他能映射一些第三方模块就要使用module

image.png

module

:::info module的作用就是处理第三方插件的报错 ::: image.png

eval

:::info eval是打包速度最快的一种方式，他也可以帮我们定位到具体的文件。
他是根据eval这种js执行形式来生成sourceMap的对应关系的。
但是针对于比较复杂的代码的情况下，如果用eval他提示出来的内容可能并不全面。 :::

image.png
image.png

最佳方案

开发环境使用 cheap-module-eval-source-map，他提示出来的错误比较全，而且它的打包速度又比较快

生产环境，一般来讲生产环境是不需要的。但有时侯希望快速定位线上环境的问题，
可以使用cheap-module-source-map，这样就可以更加准确。