webpack定义解析

webpack本质上是一种前端资源编译、打包工具，它将多份资源文件打包成一个bundle，能支持babel，eslint，less，能模块化处理css,图片等资源，能结合hmr和开发服务器，能持续监听和持续构建新写好的代码，能进行代码分离，支持tree-shaking和sourcemap。

webpack使用方法

webpack的核心流程有入口处理，依赖解析，资源解析和资源合并打包，分别为从"entry"文件开始，启动编译流程，从entry文件开始，根据require和import语句找到依赖资源，根据module配置，调用资源转一起，将png，css等非标准js资源转译为js内容，将编译后的资源内容合并打包为可以在浏览器中直接运行的js文件。其中从entry文件开始找寻依赖资源，解决了我之前的疑惑，因为之前没有了解到是从enrty文件开始的，所以就纳闷如果是从其中一个文件开始，如果其他的文件应该在这个文件之前被引用到，那会发生什么奇怪的情况，后面看了这篇文章，才知道原来是从最初始的入口文件开始的，才得到答案。webpack的工具类配置，开发效率类的有watch，devtool，devServer，性能优化类的有cache，performance，日志类的有stats，infrastructureLogging。流程类配置的为上面提到的输入，模块处理，后处理和输出。我之前接触到的有sourcemap，那是在webpack.config.js中的devtool选项设置为sourcemap，这样就能在编译后的代码位置找到源代码报错的地方，快速修复。在生产环境下，sourcemap文件一般不会传到服务器上面，而是通过前端监控系统等收集出错信息，再结合内部服务器的sourcemap找到出错的源代码，进行修复。