Webpack4.0基础教程五：suorce map

当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。

为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

Source map有很多不同的选项可用，请务必仔细阅读它们，以便可以根据需要进行配置。

 

上面是官方的原话，本人懒，直接拷贝过来了。。。

 

对于source map的选项配置，请参考：https://www.webpackjs.com/configuration/devtool/

 

对于source map深层原理的理解，请参考阮一峰大大的文章:http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

 

好了，现在来看栗子了，这里使用的是官方的栗子（其他的看心情再捣鼓捣鼓。。。似不似很欠扁。。。哈哈）：

首先，我们在webpack.config.js中添加devtool选项：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ],
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.html$/,
        loader: 'html-withimg-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'yaodebian',
      filename: 'index.html',
      template: './src/index.html',
      inject: true
    }),
    new CleanWebpackPlugin(['dist'])
  ]
}

然后先对入口文件进行一些修改，添加如下：

hahaha();

 

因为hahaha()之前我们并没有声明过，肯定会报错。我们先打包：npm run build

 

然后我们运行一下：

点进去看看：

我们看到，明明是23行出错，但是它却说21行报错，是source map解析出错了吗，不禁产生这样的想法。

 

我们在22行处添加consoe.log('yaodebian'):

import './index.html'

import './style.css';
import Icon from './Hydrangeas.jpg'
console.log('yaodebian');
let arr = [1, 2, 3];
console.log([...arr]);

function component() {
  let element = document.createElement('div');

   // 将图像添加到我们现有的 div。
   let myIcon = new Image();
   myIcon.src = Icon;

   element.appendChild(myIcon);

  return element;
}

document.body.appendChild(component());
consoe.log('yaodebian');
hahaha();
 

我们再次打包看看：

 

这次却是正确的，很好的标记出了错误，至于为什么之前的不准确目前不知道其原理，姑且先将它视作是souce map解析的问题吧，有知道的小伙伴请告知一下下。

之后看了几篇文章，对于devtool这个配置选项，不同的属性值会导致不同程度的souce map解析定位，以及会影响构建速度，不过并没有怎么看懂。这里就不再赘述了，涉及的内容比较多，想之后再单独抽时间总结一下。

 

接着上面的继续。。。还有好多知识点。。。