文章目录
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/104519418