配置source-map

配置source-map

sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术。我们的开发i代码通常都会被编译压缩，若原始代码中出现错误，那么很难找到错误所在位置，使用source-map就会使我们很快定位到错误在原代码的位置。

1. 安装

yarn add @babel/core @babel/preset-env babel/loader webpack-dev-server -D

2. 配置source-map

module.exports = {
    mode:'development', 
    entry:'./src/index.js',  
    devtool:'source-map',      //增加映射文件，可以帮助我们调试源代码
    output:{
        filename:'bundle.js',  
        path:path.resolve(__dirname,'/build'), 
    }
}

devtool的四种不同方法：

1. 源码映射 会单独生成一个sourcemap文件，代码出错时，会标识当前报错的列和行(大而全)：
   devtool:‘source-map’
2. 不会产生单独的文件，但是可以显示行和列：
   devtool:‘eval-source-map’
3. 不会产生列，但是是一个单独的映射文件：
   devtool:‘cheap-module-source-map’
4. 不会生成文件，集成在打包后的文件中，不会产生列：
   devtool:‘cheap-module-eval-source-map’