sourceMap的配置

sourceMap是一个映射关系，比如代码写错，但是打包成功，在程序运行时发现错误，提示的错误却是在打包后的js文件中，那我们如何将报错信息提示到本地文件中

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
	mode: 'development',
	// development devtool: 'cheap-module-eval-source-map',
	// production devtool: 'cheap-module-source-map',
    // eval模式是使用eval将webpack中每个模块包裹，然后在模块末尾添加模块来源//# souceURL， 依靠souceURL找到原始代码的位置。
	devtool: 'eval', // 速度最快
    // 这个会将报错信息提示到打包文件中
	devtool: 'none', 
    // 这个会将报错信息提示到源代码中,这个会生成一个map文件，打包速度会变慢
    devtool: 'source-map',
    //  上方生成的map文件就会变成一个base64编码添加到打包的文件中,报错会具体到某一行某一列
    devtool: 'inline-source-map', 
    //  与上方的区别就是报错提示到行就行，不需要那么具体，节约性能
    devtool: 'cheap-inline-source-map', 
    //  如果想让映射关系既有业务代码，又有第三方代码就用这个
    devtool: 'cheap-module-eval-source-map', 
    //  最佳使用, 提示全，速度也还可以
    devtool: 'cheap-module-inline-source-map', 
	entry: {
		main: './src/index.js'
	},
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			} 
		}, {
			test: /\.(eot|ttf|svg)$/,
			use: {
				loader: 'file-loader'
			} 
		}, {
			test: /\.scss$/,
			use: [
				'style-loader', 
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2
					}
				},
				'sass-loader',
				'postcss-loader'
			]
		}]
	},
	plugins: [new HtmlWebpackPlugin({
		template: 'src/index.html'
	}), new CleanWebpackPlugin(['dist'])],
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	}
}