SourceMap的配置

1.引出SourceMap

参考链接

使用devtool其实就是在配置SourceMap

SourceMap是什么呢?假如我在入口文件index.js中写了错误的代码，比如：

consolee.log('Hello World!!!!');//这里我故意将代码写错了

目前我们的webpack配置文件是这样的:

var path = require('path'); //引入node的核心模块path，来处理路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', //注意：在mode为development时，默认sourceMap已经被配置了
    // devtool: 'none', //关闭开发模式下的sourceMap
    entry: {
        main: './src/index.js', //入口文件为当前目录下的src下的index.js文件
    },
    output: {
        path: path.resolve(__dirname, 'bundle'), //__dirname:表示当前文件所在的文件目录，也就是项目根目录,打包生成的文件放在bundle目录下
        filename: '[name].js', //在这里动态获取打包生成的文件打包后的文件名
    },
    module: {
        rules: [{
                test: /\.(jpe?g|png|gif|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash:6]. [ext]',
                        outputPath: 'images',
                        limit: 204800 //表示当图片的大小超过200kb时，将其打包生成图片
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                        modules: true
                    }
                }, 'sass-loader', 'postcss-loader']
            },
        ]
    },
    plugins: [new HtmlWebpackPlugin()],
}

//package.json
  "scripts": {
    "bundle": "webpack"
  },

运行npm run bundle打包代码，可以看到代码是可以正常被打包出来的，在浏览器中打开index.html页面，f12打开控制台，你就会发现有一个报错:

error.png
点击查看错误详情:
e1.png
点进去之后就会看到webpack给我们显示错误的具体位置:
e2.png
这件事就是sourceMap为我们做的，它可以将打包生成的main.js文件中的错误映射到我们的源代码中的具体位置，以便我们可以更快的定位到错误信息.
需要注意的是当我们在项目里配置了sourceMap之后，项目的打包速度会变慢，因为打包的时候需要去构建这种映射关系，同时当我们devtool填写了sourceMap之后，会在打包生成的文件夹中多出一个与main.js对应的main.js.map文件，这个文件里面存放的就是映射的对应关系。如果你不想要这个map文件，那可以将devtool的值设置为inline-source-map,这个时候webpack会将这个map文件生成base64的字符串被放到生成的main.js文件中，在bundle文件夹中你就看不到map文件了.
但是我们这样配置了devtool之后，webpack其实会告诉我们错误出现在哪一行哪一个字符，错误的位置会被精确到每一个字符串，这样显然是比较浪费性能的，我们在inline-source-map前面再加一个cheap即cheap-inline-source-map，就可以让webpack只告诉我们错误出现在哪一行，一定程度上优化了打包性能.
这样配置sourceMap，它只负责对我们的业务代码进行映射，但是如果你想让它也负责对其他第三方模块的映射的话就可以再添加一个module属性即变为cheap-module-inline-source-map,这样sourceMap也会对项目中的其他第三方模块的错误信息做出对应的映射。

2.最佳实践

可以将devtool设置为eval，这样打包速度会得到最大的优化，但是使用eval的话提示的错误信息就没有那么明显了，dll lee老师推荐的在开发模式下最佳的配置是将devtool设置为：cheap-module-eval-source-map,这样配置提示的错误是比较全面的，同时打包速度也是比较快的

在production开发模式下，一般是不需要配置sourceMap的，但是你如果想让线上代码出错的时候也进行提示，我们可以配置：devtool:'cheap-module-source-map'就好