1。entry和output的基本配置这里我们继续讲解这两个配置项：...entry:{main:'./src/index.js'},...output:{filename:'bundle.js',path:path.resolve(__dirname,'dist')}1.1打包多个文件并输出我们有一个新需求，希望对index.js进行两次打包，分别生成两个文件，一个叫main，一个叫sub，这里入口可以这样配置：entry:{main:'./src/index.js',sub:'./src/index.js'}这里直接打包肯定会失败，因为我们的文件名output只有一个bundle.js文件，能否根据入口的配置自动生成output，可以使用占位符：output:{filename:'[name].js'}同时，webpack会自动将这两个js文件导入到生成的index.html中：//index.html...1.2中HTMLJS引用添加公有域名的场景，打包后的index.html文件会作为网页入口文件发送到后台，而那些js文件会上传到CDN，然后在web上的时候上传页面加载下拉。这时候我们希望打包后的index.html能够自动索引到JS文件地址，加上CDN域名：//index.html...我们可以配置output的publicPath配置项：output:{publicPath:'http://cdn.com。cn/...}更多配置项可以参考官方文档深入学习~2.SourceMap配置2.1什么是sourceMapsourceMap其实是描述的一个映射关系（基于map文件），当你的代码出错的时候，有时候如果没有打开sourceMap，报错行只会定位到打包后的JS文件所在的位置。如果想在打包后的debuglog中定位到源码的行号，需要打开sourceMAp。比如：他知道dist目录下的main.js文件的第96行其实对应的是src目录下的index.js文件的第1行！2.2sourceMap的使用在开发状态下，sourceMap是默认开启的，但是可以通过配置devtool字段来配置不同的模式：module.exports={...devtool:'none'//关闭sourcemap}的不同参数devtool代表sourcemap不同的配置会影响打包速度：这里构建代码中配置不同的devtool项后，构建速度会有怎样的变化？配置source-map会影响打包速度，但对调试有用。而我们会在打包目录下找到一个main.js.map文件，他其实是通过这个文件做一个映射配置成base64字符串放在main.js的最下面cheap-inline-source-map这里我们看以便宜为前缀，其实这些是可以自由组合的。乍一看好像没什么区别，但是这个便宜其实代表了地图源码的准确性。不便宜，它会告诉你源码哪一行哪一行错了。添加便宜只会告诉你哪一行。这样一来，打包性能实际上会有所提升，尤其是在打包的源码很多的时候！这就是为什么便宜的构建意味着快速。同时也不会控制非业务代码的错误，比如loader中的错误，第三方模块中映射的错误。模块前缀cheap-module-source-map意味着加载程序仍将被管理。第三方模块的错误~eval前缀eval是最快的类型封装方式。乍一看，包装后似乎没有什么区别。我们查看dist目录，发现没有map文件，最下面也没有base64，但是有一个eval函数，其实是通过eval函数执行的。打包速度很快，但是对于复杂的代码，这种方式可能会报错Incomplete。2.4最佳实践考虑到我们在开发环境中对sourceMap的要求是：快速（eval）、全信息（module），并且因为此时代码没有压缩，所以我们不太关心代码列信息（cheap），在开发环境中最好使用：cheap-module-eval-source-map，这种方式提示更完整，打包速度更快。线上环境（模式为production）一般不需要sourceMap映射，但我们也希望能快速定位问题，可以配置一个cheap-module-source-map。如果你不想让任何人直接在浏览器中看到我们未编译的源代码，你不应该直接向浏览器提供sourceMap。但是我们还需要sourceMap来定位我们的错误信息。这时候我们可以设置hidden-source-map：一方面webpack会生成一个sourcemap文件提供给sentry等错误收集工具，另一方面也不会在bundle中添加引用注释，以避免使用浏览器。记住这个最佳实践几乎就足够了。2.5映射原理有兴趣了解这里原理的同学可以参考这个进一步学习：https://zhuanlan.zhihu.com/p/...
