什么是SourceMap?我们看下面的案例:

在不使用SourceMap的情况下

1.我在index.js中故意写错代码然后让它打包看看:

在这里我故意把console.log写错了

2.还有就是webpack.config.js中的配置需要修改一下，因为在mode=‘development’的模式下，webpack默认devtool=‘sourceMap’.

在这我将devtool改成了none

然后我们看它的错误提示

总结:它的错误提示定位到我已经打包好了的index_bundle.js下面了，对于我们找错误是很不方便的.

使用SourceMap

配置webpack.config.js

//将devtool：'source-map'即可
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const {CleanWebpackPlugin}= require('clean-webpack-plugin');
module.exports={
    mode:'development',
    devtool:'source-map',
    entry:{
        main:'./index.js'
    },
    module:{
        rules:[
            {
                test:/\.jpg$/,
                use:{
                    loader:'file-loader',
                    options:{
                        outputPath:'images',
                        name:'img.jpg'
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },{
                test: /\.scss$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            }
        ]
    },
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'index_bundle.js'
    },
    plugins:[new HtmlWebpackPlugin({
        template:'./index.html'
    }),new CleanWebpackPlugin()]
}

打包运行结果如下:

image.png

我们可以看到它已经能定位到错误的文件中的第几行了.

总结:sourceMap是一种映射关系它能从打包好的文件中映射到源文件错误的地方.
扩展:
其实配置devtool就是配置sourceMap，关于更多的devtool的配置可以查看https://webpack.js.org/configuration/devtool/
我们在平常开发中(mode=development)devtool一般为:'cheap-module-eval-source-map'(这样配置能加快打包的效率)
在上线时配置(mode=production):'cheap-module-source-map'