1. 为什么

运行的代码是经过 webpack 编译后，所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错，那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。

所以我们需要更加准确的错误提示，来帮助我们更好的开发代码。

2. 是什么

SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。

它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

3. 怎么用

通过查看Webpack DevTool可知，SourceMap 的值有很多种情况.

但实际开发时我们只需要关注两种情况即可：

? 开发模式：cheap-module-source-map

优点：打包编译速度快，只包含行映射

缺点：没有列映射

const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
//入口：相对路径和绝对路径都行
entry: './src/main.js',
//输出
output: {
path: undefined, // 开发模式没有输出，不需要指定输出目录
filename: 'static/js/main.js',
// clean:true, // 开发模式没有输出，不需要清空输出结果
},
//加载器
module: {
rules: [
......
]
},
//插件
plugins: [
......
],
//模式
mode:'development', //开发模式
//开发服务器
devServer:{
host:'localhost', // 服务器地址
port: '3000', //端口
open: true, //是否自动开启浏览器
},
devtool:'cheap-module-source-map'
};

? 生产模式：source-map

优点：包含行/列映射

缺点：打包编译速度更慢

const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) =>{
return [
MiniCssExtractPlugin.loader, // 提取css成单独文件
"css-loader", // 将css资源编译成commonjs的模块到js中
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor,
].filter(Boolean);
}
module.exports = {
//入口：相对路径和绝对路径都行
entry: './src/main.js',
//输出
output: {
path: path.resolve(__dirname, '../dist'), // 生产模式需要输出
filename: 'static/js/main.js',
clean:true,
},
//加载器
module: {
rules: [
......
]
},
//插件
plugins: [
......
],
//模式
mode:'production', //生产模式
devtool:'source-map'
};