SourceMap-开发模式下如何配置SourceMap

什么是Source Map

Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

解决默认Source Map的问题

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

 // 此选项生成的Source Map 能够保证”运行时报错的行数“与”源代码的行数“保持一致，// 此选项生成的Source Map 能够保证”运行时报错的行数“与”源代码的行数“保持一致,在开发阶段，建议大家都把devtool的值设置为 eval-source-map
    devtool: 'eval-source-map',

//使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式，可选值有两个 development 和 production
    // 结论：开发时候一定要用development，因为追求的是打包的速度，而不是体积
    // 反过来，发布上线的时候一定能要用production，因为上线追求的是体积小，而不是打包速度快
    mode: 'development',
    // 此选项生成的Source Map 能够保证”运行时报错的行数“与”源代码的行数“保持一致，// 此选项生成的Source Map 能够保证”运行时报错的行数“与”源代码的行数“保持一致,在开发阶段，建议大家都把devtool的值设置为 eval-source-map
    devtool: 'eval-source-map',
    plugins: [htmlPlugin, new CleanWebpackPlugin()],//通过plugins节点，使htmlPlugin插件生效
    entry: path.join(__dirname, './src/index.js'),//打包入口文件的路径
    output: {
        path: path.join(__dirname, './dist'),//输出文件的存放路径
        filename: 'js/bundle.js'//输出文件的名称
    },
    devServer: {
        open: true,
        port: 80,
        // contentBase: __dirname, -- 注意，这种写法已弃用
        static: {
            directory: path.join(__dirname, "/"),
        },
    },
    module: {
        rules: [
            //定义了不同模块对应的loader
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            //处理.less文件的loader
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            //文件后缀名的匹配模块
            //在配置url-loader的时候，多个参数之间，使用&符号进行分隔
            {test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images'},
            //使用babel-loader处理高级的JS语法
            //在配置babel-loader的时候，程序员只需要把自己的代码进行转换即可，一定要排除node_module目录中的JS文件
            //因为第三方包中的JS兼容性，不需要程序员关心
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    }
}