我们会从以下角度来进行优化工作：

提升开发体验

提升打包构建速度

减少代码体积

优化代码运行性能

一、Webpack优化配置

1. SourceMap

运行后，所有的CSS和JS都合并成了一个文件，并且解决了其他代码，此时如果代码运行出错，那么提示代码错误的位置我们是看不懂的，那么我们及很难得去发现错误在哪里。

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

SourceMap(源代码映射)是一个用来生成源代码与构建后代码一一映射得方案。

他会生成XXX.map文件，里面包含源代码和构建后代码每一行，每一列得映射关系。当构建后代码出错了，会通过XXX.map文件，从构建后的代码出错位置找到映射后源代码出错的位置，从而让浏览器提示源代码文件出错的位置，帮助开发者能够更快的找到错误的根源。

虽然SourceMap的值有很多种情况：

但是实际情况开发的时候，我们一般关注两种即可：

module.exports = {
    // 其他省略号
    mode: "development",
    devtool: "cheap-module-source-map",
}