在webpack devtool的配置中可以看到下列描述:

configureWebpack
Type: Object | Function
如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
更多细节可查阅：配合 webpack > 简单的配置方式
devtool: ‘source-map’

其中一些值适用于开发环境，一些适用于生产环境。对于开发环境，通常希望更快速的 source map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 source map，需要从 bundle 中分离并独立存在。

此时我们的项目是注释掉这一块的配置项，所以使用的是默认的配置：

这个时候的断点可能就会出现位置错位的现象，
Vue文档中也提及到，在浏览器中展示源码的话，你需要更新 webpack 配置以构建 source map，并且在更新之后重新运行项目。

我们在编写代码的时候，会有很多Index.vue的文件，在运行的时候，断点是被触发了，但是跳到了其他文件的样式文件的原因是什么呢，其中的原因之一就有重名文件的原因，在我们设置了source-map修改打包方式之后就会避免这种问题。