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/...