什么是source-map?

source-map：一种提供源代码到构建后代码映射的技术（如果构建后代码出错了，通过映射可以追踪源代码错误）
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

各种source-map的区别

source-map（外部）
- 错误代码准确信息
- 源代码错误位置
inline-source-map（内联） 只生成一个内联source-map
- 错误代码准确信息
- 源代码错误位置
hidden-source-map（外部） 不能追踪源代码错误，只能提示到构建后代码的错误位置
- 错误代码准确信息
- 没有源代码错误位置
eval-source-map（内联） 每一个文件都生成对应的source-map
- 错误代码准确信息
- 源代码错误位置
nosources-source-map（外部）
- 错误代码准确信息
- 没有任何源代码信息
cheap-source-map（外部）
- 错误代码准确信息
- 源代码错误位置（只能精确到行）
cheap-modules-source-map（外部） module会将loader的source map加入
- 错误代码准确信息
- 源代码错误位置

内联和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快

开发环境和生产环境的选择

开发环境：速度快，调试更友好

  • 速度快(eval>inline>cheap>…)
    • eval-cheap-souce-map
    • eval-source-map
  • 调试更友好
    • souce-map
    • cheap-module-souce-map
    • cheap-souce-map

—> eval-source-map / eval-cheap-module-souce-map（推荐使用这两种，vue、react默认使用前一种，生产环境也是）

生产环境：

源代码要不要隐藏? 调试要不要更友好?
内联会让代码体积变大，所以在生产环境不用内联
nosources-source-map 全部隐藏
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

—> source-map / cheap-module-souce-map

案例

  1. const { resolve } = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. module.exports = {
  5.   entry: ['./src/js/index.js', './src/index.html'],
  6.   output: {
  7.     filename: 'js/built.js',
  8.     path: resolve(__dirname, 'build')
  9.   },
  10.   module: {
  11.     rules: [
  12.       // loader的配置
  13.       {
  14.         // 处理less资源
  15.         test: /\.less$/,
  16.         use: ['style-loader', 'css-loader', 'less-loader']
  17.       },
  18.       {
  19.         // 处理css资源
  20.         test: /\.css$/,
  21.         use: ['style-loader', 'css-loader']
  22.       },
  23.       {
  24.         // 处理图片资源
  25.         test: /\.(jpg|png|gif)$/,
  26.         loader: 'url-loader',
  27.         options: {
  28.           limit: 8 * 1024,
  29.           name: '[hash:10].[ext]',
  30.           // 关闭es6模块化
  31.           esModule: false,
  32.           outputPath: 'imgs'
  33.         }
  34.       },
  35.       {
  36.         // 处理html中img资源
  37.         test: /\.html$/,
  38.         loader: 'html-loader'
  39.       },
  40.       {
  41.         // 处理其他资源
  42.         exclude: /\.(html|js|css|less|jpg|png|gif)/,
  43.         loader: 'file-loader',
  44.         options: {
  45.           name: '[hash:10].[ext]',
  46.           outputPath: 'media'
  47.         }
  48.       }
  49.     ]
  50.   },
  51.   plugins: [
  52.     // plugins的配置
  53.     new HtmlWebpackPlugin({
  54.       template: './src/index.html'
  55.     })
  56.   ],
  57.   mode: 'development',
  58.   devServer: {
  59.     contentBase: resolve(__dirname, 'build'),
  60.     compress: true,
  61.     port: 3000,
  62.     open: true,
  63.     hot: true
  64.   },
  65.   devtool: 'eval-source-map'
  66. };
  • 运行命令：webpack