简介

一个信息文件，里面储存位置信息，有了它，除错工具将直接显示原始代码，方便后期调试

解决

在开发环境下，在webpack.config,js中添加了如下配置，即可保证运行时报错的行数与源代码行数保持一致

module.exports={
	mode: 'development',
	devtool: 'eval-source-map'
}

发布时的关闭

为了防止源代码泄露，在生产环境下，需要省略devtool选项
发布时：

module.exports={
	mode: 'development',
	devtool: 'nosources-source-map'
}

原理

打开sourceMap会显示未压缩的源代码，供方便调试，关闭后代码会因为发布时压缩成长长的一行，不容易被泄露

在npm run build之后，点击dist文件夹内的index.html，右键运行/view in browser 即可发现js文件已被压缩

需要字节配置webpack吗？

不需要，实际开发中会使用命令行工具（CLI）一键生成带有webpack的项目
开箱即用，所有的配置项都是现成的，只需要知道webpack的基本概念即可

@符号

@表示src源代码目录，从外往里找，不需要使用…/从里往外
例：import msg from '@/msg.js'
但是也要配置webpack.config.js