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

在不使用SourceMap的情況下

1.我在index.js中故意寫錯代碼然后讓它打包看看:

在這里我故意把console.log寫錯了

2.還有就是webpack.config.js中的配置需要修改一下，因為在mode=‘development’的模式下，webpack默認(rèn)devtool=‘sourceMap’.

在這我將devtool改成了none

然后我們看它的錯誤提示

總結(jié):它的錯誤提示定位到我已經(jīng)打包好了的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()]
}

打包運行結(jié)果如下:

image.png

我們可以看到它已經(jīng)能定位到錯誤的文件中的第幾行了.

總結(jié):sourceMap是一種映射關(guān)系它能從打包好的文件中映射到源文件錯誤的地方.
擴展:
其實配置devtool就是配置sourceMap，關(guān)于更多的devtool的配置可以查看https://webpack.js.org/configuration/devtool/
我們在平常開發(fā)中(mode=development)devtool一般為:'cheap-module-eval-source-map'(這樣配置能加快打包的效率)
在上線時配置(mode=production):'cheap-module-source-map'