本文共 2551 字，大约阅读时间需要 8 分钟。
Webpack 有非常多的概念，很多名词长得都差不多。我把这些分散在文档和教程里的内容总结起来，写了一份 webpack 中的易混淆知识点，目前看是全网独一份，大家可以加个收藏，方便以后检索和学习。
全集链接 ➡️
sourse-map ，里面都有个 map 了，肯定是映射的意思。sourse-map 就是一份源码和转换后代码的映射文件。具体的原理内容较多，感兴趣的同学可以自行搜索，我这里就不多言了。
我们先从官网上看看 sourse-map 有多少种类型：
emmmm，13 种，告辞。
如果再仔细看一下，就发现这 13 种大部分都是 eval、cheap、inline 和 module这 4 个词排列组合的，我做了个简单的表格，比官网上直白多了：
| 参数 | 参数解释 |
|---|---|
| eval | 打包后的模块都使用 eval() 执行，行映射可能不准；不产生独立的 map 文件 |
| cheap | map 映射只显示行不显示列，忽略源自 loader 的 source map |
| inline | 映射文件以 base64 格式编码，加在 bundle 文件最后，不产生独立的 map 文件 |
| module | 增加对 loader source map 和第三方模块的映射 |
还不明白？可以看看 demo。
我们对 webpack 做一些配置，devtool 是专门配置 source-map 的。
......{ devtool: 'source-map',}...... index.js 文件为了简便，我们只写一行代码，为了得出报错信息，我们故意拼错：
console.lg('hello source-map !') // log 写成 lg 下面我们试一试常见的几个配置：
source-map 是最大而全的，会生成独立 map 文件：
注意下图光标的位置，，source-map 会显示报错的行列信息：
cheap，就是廉价的意思，它不会产生列映射，相应的体积会小很多，我们和 sourse-map 的打包结果比一下，只有原来的 1/4 。
eval-source-map 会以 eval() 函数打包运行模块，不产生独立的 map 文件，会显示报错的行列信息：
// index.bundle.js 文件!function(e) { // ...... // 省略不重要的代码 // ......}([function(module, exports) { eval("console.lg('hello source-map !');//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi4vc3JjL2luZGV4Mi5qcz9mNmJjIl0sIm5hbWVzIjpbImNvbnNvbGUiLCJsZyJdLCJtYXBwaW5ncyI6IkFBQUFBLE9BQU8sQ0FBQ0MsRUFBUixDQUFXLG9CQUFYIiwiZmlsZSI6IjAuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zb2xlLmxnKCdoZWxsbyBzb3VyY2UtbWFwICEnKSJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///0\n")}]); 映射文件以 base64 格式编码，加在 bundle 文件最后，不产生独立的 map 文件。加入 map 文件后，我们可以明显的看到包体积变大了；
// index.bundle.js 文件!function(e) {}([function(e, t) { console.lg("hello source-map !")}]);//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4uL3NyYy9pbmRleDIuanMiXSwibmFtZXMiOlsiaW5zdGFsbGVkTW9kdWxlcyIsIl9fd2VicGFja19yZXF1aXJ......// base64 太长了，我删了一部分，领会精神 上面的几个例子都是演示，结合和实际经验，常用的配置其实是这几个：
1.source-map
大而全，啥都有，就因为啥都有可能会让 webpack 构建时间变长，看情况使用。
2.cheap-module-eval-source-map
这个一般是开发环境（dev）推荐使用，在构建速度报错提醒上做了比较好的均衡。
3.cheap-module-source-map
一般来说，生产环境是不配 source-map 的，如果想捕捉线上的代码报错，我们可以用这个
这篇文章差不多就写到这里了，后面我还会写一些 webapck 打包优化的文章。
从学习 webpack 到这篇输出差不多花了 2 个星期的时间，个人感觉 webpack 说到底，也就是工具链的一环，很多配置内容没必要像 JavaScript 的内置方法一样需要记忆，自己写个大而全的 demo，知道配置项大概能干个啥，要用的时候查一下就行了。
因此我总结了这篇 webpack 易混淆知识点的文章，大家可以点击收藏一下，以后准备面试或者复习的时候，看一下就懂个大概了。
最后推荐一下我的个人公众号：「卤蛋实验室」，平时会分享一些前端技术和数据分析的内容，大家感兴趣的话可以关注一波：
转载地址：http://pvtfz.baihongyu.com/