学习，要知其然，知其所以然
前文
其实之前已经写过webpack的一个基础的实践 Webpack基础学习 ，但是后续并没有继续深入webpack主题，现在开始重新整理，输出一个专辑。
做一件事最好的时机是在之前，其次是现在。
什么是Webpack
webpack是一个用于现代JavaScript应用程序的 静态模块打包工具。 当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图， 然后将你项目中所需的每一个模块组合成一个或多个bundles。
可以用Webpack做什么
模块打包
正如webpack简介中讲的，它是一个静态模块打包工具，我们可以用webpack来实现JavaScript、CSS以及图片等资源的打包。
代码转换和优化
- 基于webpack，我们可以使用babel来对ES6及以上版本的JavaScript代码转译成向后兼容的ES5代码。
- 我们可以使用loader来对浏览器无法理解的编程语言进行转换以及处理
- 在打包时,Webpack也可以通过plugin来对打包后的代码进行压缩以及混淆。
开发环境支持
- 模块热更新（HMR）：在开发过程中，当修改了一个模块的代码时，Webpack的热更新功能可以在不刷新整个页面的情况下，将新的模块代码替换掉旧的模块代码，并且保持应用程序的状态。
- 开发服务器（Dev Server）：webpack-dev-server 可以提供一个本地开发服务器。它会监听文件的变化，自动重新打包代码，并在浏览器中实时更新。并且还可以提供一些便利功能，如自动打开服务器、代理后端API请求等。
Webpack的核心概念
入口（entry）
定义： 入口起点将会标明webpack应该使用哪个模块来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。
用途：通过指定入口，Webpack可以沿着模块的导入关系，递归地解析所有相关的模块，从而构建出完整的模块依赖关系图。
输出（output）
定义：output属性告诉webpack在哪里输出它所创建的bundle，以及如何命名这些文件。
用途：合理地配置输出可以确保打包后的文件按照项目的需求被放置在正确的位置，方便在HTML文件中引用或者部署到服务器等操作。
加载器（Loader）
定义：webpack只能理解JavaScript和JSON文件，这是webpack开箱可用的自带能力。loader让webpack能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
用途：加载器拓展了Webpack的功能，使得它可以处理各种各样的前端资源，如将Sass/Scss文件转换为Css文件，或者将ES6+语法的JavaScript转换为ES5等。
插件（plugin）
定义： loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括： 打包优化、资源管理、注入环境变量等，插件可以访问Webpack的整个编译生命周期。
用途：插件可以帮助完成一些复杂的构建任务，比如代码分割以实现懒加载、对打包后的文件进行压缩等，从而优化项目的性能和开发体验。
模块（Module）
定义：在Webpack中，模块是指任何可以作为资源被导入和导出的内容，包括JavaScript文件、Css文件、图片等。每个模块都有自己的依赖关系，Webpack通过解析这些依赖关系来打包。
用途： 模块的概念使得代码可以被分割成独立的、可维护的单元，便于团队协作开发，并且可以通过 Webpack 的打包功能将这些模块组合在一起，用于在浏览器或其他环境中运行。
