何为webpack：
Webpack是一个开元的JS模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件，这个过程就叫做模块打包。
为什么需要webpack：
应用规模大了以后，必须借助一定的工具，否则人工维护代码的成本将逐渐变得难以承受，学会使用工具可以让开发效率成倍的提升。
何为模块：
在设计程序结构时，把所有代码都堆到一起是非常糟糕的做法。更好的组织方式按照特定的功能将其拆分为多个代码段，每个代码段实现一个特定的目的。你可以对其进行独立的设计、开发和测试，最终通过接口来将它们组合到一起，这就是基本的模块化思想。
①需要手动维护js的加载顺序。页面的多个script之间通常会有依赖关系，但由于这种依赖关系是隐式的，除了添加注释以外很难清晰地指明谁依赖了谁，这样当加载文件过多的时候就会出现问题。
②每一个script标签，都意味着需要向服务器请求一次静态资源，在HTTP2还没出现的时期，建立连接的成本是很高的，过多的请求会严重拖慢网页的渲染速度。
③每个script标签中，全局作用域，如果没有进行任何处理而直接在代码中进行变量或者函数声明，就会造成全局作用域污染。
模块化则解决了上述的所有问题：
①通过导入和导出与我们可以清晰模块之间的依赖关系。
②模块可以借助工具来打包，在页面上只需要加载整合后的资源文件，减少了网络开销。
③多个模块之间的作用域是隔离的彼此不会有命名冲突。
09年开始js社区开始进行模块化尝试，并依次出现了AMD、Commonjs、CMD等解决方案。但这些都是社区提出的，并不能算语言本身的特性。而在2015年。ES6正式定义了模块标准，这门语言在诞生20年之后终于有人模块这一概念。
ES6模块标目前已经得到了大多数现代浏览器的支持，但在实际应用方面还需要一段时间，有以下原因：
①无法使用 code splitting 和 tree shaking（webpack的两个重要特性）
②大多数npm模块还是Commonjs的形式，而浏览器并不支持其语法，因此这些包没有办法直接使用。
③仍需考虑个别浏览器及平台的兼容性问题。
模块打包工具的两种工作方式：
①将存在依赖关系的模块按照特定规则合并为单个JS文件，一次全部加载进页面中。
目前社区中比较流行的打包模块有Webpack，Parcel，Rollup等。
为什么选择webpack？对比同类模块打包工具，webpack具备哪些优势？
①Webpack默认支持多种模块标准，包括AMD、Commonjs，以及最新的ES6模块，而其他工具大多数只能支持一到两种。这对于使用多种模块标准的工程非常有用，Webpack会帮助我们处理不同类型模块之间的依赖关系。
②Webpack有完备的代码分割解决方案。它可以分割打包后的资源，首屏只加载必要的部分，不太重要的功能放到后面动态地加载。这对于资源体积较大的应用来说尤为重要，可以有效地减小资源体积，提升首页渲染速度。
③Webpack可以处理各种类型的资源。除了js外，webpack还可以处理样式，模板，图片等，而开发者需要做的仅仅是导入它们。比如你可以从js文件导入一个CSS或者PNG，而这一切最终都可以由loader来处理。
④Webpack拥有庞大的社区支持。除了webpack核心库以外，还有无数开发者为它编写周边的插件和工具，绝大多数需求都可以找到已有解决方案。
安装：
webpack，对操作系统没有要求，唯一的依赖就是Node.js
webpack对node版本是有一定要求的，推荐使用LTS版本。LTS版本是node在当前阶段较为稳定的版本。该版本中不会包含太多激进的特性。
安装好node，使用 Node.js 的包管理器 npm 来安装 Webpack，安装模块方式有两种：全局安装，本地安装。
两种安装方式利弊及其特点：
全局安装的好处是，npm会帮我们绑定一个命令行环境变量，一次安装处处运行；本地安装则会添加其成为项目中的依赖，只能在项目内部使用。
建议本地安装，有以下原因：
①如果采用全局安装，那么在与他人进行项目协作的时候，由于每个人系统中webpack版本不同，可能会导致输出结果不一样。
②部分依赖于webpack的插件会调用项目中webpack的内部模块，这种情况下仍需要进行本地安装，而全局本地都有，则容易造成混淆。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
