共计 2275 个字符，预计需要花费 6 分钟才能阅读完成。
1.entry 与 ouput 的根本配置
这里咱们持续解说一下这两个配置项：
...
entry:{main:'./src/index.js'},
...
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
}1.1 打包多个文件并输入
咱们有一个新的需要，心愿把 index.js 打包两次，别离生成两个文件，一个叫 main，第二次叫 sub，这里 entry 能够这样配置：
entry:{
main:'./src/index.js',
sub:'./src/index.js'
}这里间接打包必定失败的，因为咱们的 output 的 filename 只有一个 bundle.js 文件，能不能依据 entry 的配置来主动生成 output，能够利用占位符：
output:{filename:'[name].js'
}同时 webpack 会主动把这两个 js 文件引入到生成的 index.html 中：
// index.html
...
<script src='main.js'></script>
<script src='sub.js'></script>1.2 为 HTML 的 JS 援用增加公共域名
这样一个场景，打包完的 index.html 文件会给后端，作为网页入口文件，而那些 js 文件会上传到 CDN 中，网页加载的时候再拉下来。
这时候咱们就心愿打包实现的 index.html 可能主动索引到 JS 文件地址，加上 CDN 域名：
// index.html
...
<script src='http://cdn.com/main.js'></script>
<script src='http://cdn.com/sub.js'></script>咱们就能够配置 output 的 publicPath 配置项:
output:{
publicPath:'http://cdn.com.cn/
...
}其余更多的配置项都能够参考官网文档来深刻学习~
2. sourceMap 的配置
2.1 什么是 sourceMap
sourceMap 其实是形容的一种映射关系（基于 map 文件），当你的代码出错的时候，不关上 sourceMap 的话出错行只会定位到打包后的 JS 文件的地位。
如果你想要打包后 debug 的 log 也能定位到源代码的行数时就须要关上 sourceMAp 了
例如：他晓得 dist 目录上面的 main.js 文件的 96 行实际上对应 src 目录下 index.js 文件中的第 1 行！
2.2 sourceMap 的应用
development 状态下 sourceMap 默认是开启的，然而你能够通过配置 devtool 字段来配置不同模式：
module.exports = {
...
devtool:'none' // 敞开 sourcemap
}devtool 不同的参数代表了 sourcemap 不同的配置，会影响打包速度：
这里 build 代码配置 devtool 不同项之后 build 速度会如何变动，配置 source-map 会影响打包速度，然而对于 debug 有用。
并且咱们在打包目录上面会发现一个 main.js.map 文件，他其实就通过这个文件做了一个映射
2.3 其余类型 SourceMap 配置介绍
inline-source-map
配置了这个 devtool 之后其实就是把 main.js.map 配置成一个 base64 的字符串放到 main.js 的底部
cheap-inline-source-map
这里咱们看一下 cheap 这个前缀，其实这些都能够自由组合。
乍看一下如同没什么区别，然而这个 cheap 实际上代表 map 源代码的精确度，不加 cheap 会通知你在源代码哪一行哪个字符出错了。加了 cheap 只会通知你哪一行。
这样其实打包性能会有进步，尤其是打包源代码很多的时候！这也是为什么 cheap 的 build 是 fast 的意思。
同时也不会管非业务代码的谬误，例如 loader 外面的，第三方模块外面映射的。
cheap-module-source-map
这个 module 前缀意思就是依然会治理 loader，第三方模块外面的谬误~
eval 前缀
eval 是打包类型最快的形式，乍看如同打包完也没啥区别。
咱们看一下 dist 目录中发现没有了 map 文件，底部也没有 base64，然而存在一个 eval 函数，他其实是通过 eval 这个函数来执行的，打包速度很快，然而对于简单的代码这种形式可能谬误提醒不全面。
2.4 最佳实际
思考到咱们在开发环境对 sourceMap 的要求是：快（eval），信息全（module），且因为此时代码未压缩，咱们并不那么在意代码列信息（cheap），开发环境下最好是应用:cheap-module-eval-source-map，这种形式提醒较全，打包速度快。
线上环境（mode 为 production），个别不须要一个 sourceMap 的映射，然而也心愿能疾速定位问题，咱们能够配置一个 cheap-module-source-map。
如果你并不心愿任何人都能够在浏览器间接看到咱们未编译的源码，不应该间接提供 sourceMap 给浏览器。但咱们又须要 sourceMap 来定位咱们的错误信息，这时咱们能够设置 hidden-source-map：
一方面 webpack 会生成 sourcemap 文件以提供给谬误收集工具比方 sentry，另一方面又不会为 bundle 增加援用正文，以防止浏览器应用。
这一块记得这个最佳实际就差不多了。
2.5 映射原理
这里感兴趣理解原理的同学能够参考这里深刻学习一下：
https://zhuanlan.zhihu.com/p/…
