八、source map （开发）

source map 是干啥的，顾名思义源码映射，当我们的代码出错了，source map 功能，能够将编译后的代码映射回原始源代码，这样更容追踪错误和警告。这样说可能不太具象，我们通过例子来说明吧。

1.没有配置 source map

我们以之前的代码为例。只是将 print.js 故意写错行，像这样。

// src/print.js
export default function printMe () {
  // 我们写错一个
  cosnole.error('I get called from print.js')
}

然后打包

yarn run build

打开 dist/index.html，点击按钮，发现报错了。

image.png

我们点开 app.bundle.js, 看下报错位置在哪里

image.png

很明显这样很难追踪错误和警告，当我们的代码量多起来的时候就更难定位错误了。

2. 配置了source map

我们把 source map 的配置加上

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 配置 source map
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin({
      title: '开发'
    }),
    new CleanWebpackPlugin(['dist'])
  ]
}

然后再打包、打开 index.html、点击按钮

image.png

我们很快的就能发现是 print.js 这个文件的第三行出错了。点开 print.js 可以看到具体是哪里报错了。

image.png

这就是 source map 的作用，对于调试代码非常有用。就像我们去问路，别人跟你说就在东边啊，但是东边那么大，哪都是东边，我们很难找到要去的地方，但是有人送了一幅地图给你，并且标记了位置，这就很容易到达目的地了。

source map 有很多不同的选项，不同的选项会明显影响到构建和重新构建的速度。所以要针对不同场景合理选择。

https://www.webpackjs.com/configuration/devtool/ 这里很清楚的给了我们参考和推荐，所以不清楚如何选择的，可以看下。

以上示例来自 demo8