Webpack--简介

一、Webpack概念

Webpack是一个开源的Javascript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件（有时会有多个）。这个过程就叫作模块打包。

二、模块打包工具

（1）模块打包工具的任务就是解决模块间的依赖，使其打包后的结果能运行在浏览器上。它的工作方式主要分为两种（Webpack、Parcel、Rollup）

• 将存在依赖关系的模块按照特定规则合并为单个JS文件，一次全部加载进页面中。
• 在页面初始时加载一个入口模块，其他模块异步地进行加载。

（2）对比同类模块打包工具，Webpack具备以下几个优势

1、Webpack默认支持多种模块标准。包括AMD，CommonJS，ES6模块,而其他工具大多只能支持一到两种。

2、Webpack有完备的代码分割（code splitting）解决方案。即可以分割打包后的资源，首屏只加载必要的部分，不太重要的功能放在后面动态地加载，这对于资源体积较大的应用来说尤为重要，可以有效地减小资源体积，提升首页渲染速度。

3、Webpack可以处理各种类型的资源。除了Javascript外，Webpack还可以处理样式、模板、甚至图片等，而开发者需要做的仅仅是带入它们。

4、Webpack拥有庞大的社区支持。

三、Webpack相关

（1）Webpack对于操作系统没有要求，它唯一的依赖就是node.js。

（2）Webpack默认资源输出目录是/dist，默认源代码入口是src/index.js 

（3）Webpack的默认配置文件为webpack.config.js 

（4）Webpack对于output.path的要求是使用绝对路径（从系统根目录开始的完整路径）。而在webpack.config.js中，通过调用Node.js的路径拼装函数-path.join将_dirname（Node.js内置全局变量，值为当前文件所在的绝对路径）与dist（输出目录）连接起来，得到了最终的资源输出路径。

四、webpack-dev-server（热更新）

（1）作用

启动一个本地服务，可以处理打包资源与静态文件的请求。

（2）职能

1、令Webpack进行模块打包，并处理打包结果的资源请求

2、作为普通的Web Server，处理静态资源文件请求

（2） webpack-dev-server可以看作一个服务者，它的主要工作就是接收浏览器的请求，然后将资源返回。

1、当服务启动时，会先让Webpack进行模块打包并将资源准备好（bundle.js）。

2、当webpack-dev-server接收到浏览器的资源请求时，它会首先进行URL地址校验。

3、如果该地址是资源服务地址（配置的publicPath），就会从Webpack的打包结果中寻找该资源并返回给浏览器。

4、反之，如果请求地址不属于资源服务地址，则直接读取硬盘中的源文件并将其返回。

 （3）直接用Webpack开发和使用webpack-dev-server有一个很大的区别，前者每次都会生成bundle.js，而webpack-dev-server只是将打包结果放在内存中，并不会写入实际的bundle.js，在每次webpack-dev-server接收到请求时都只是将内存中的打包结果返回给浏览器。

（4）live-reloading（自动刷新）

当webpack-dev-server发现工程源文件进行了更新操作就会自动刷新浏览器，显示更新后的内容。该特性可以提升我们本地开发的效率。

五、其他打包工具

Rollup：更加专注于Javascript的打包，它自身附加的代码很少，具备tree shaking，且可以输出多种形式的模块。

Parcel：在资源处理流程上做了改进，以追求更快的打包速度。同时其零配置的特性可以减少很多项目开发中花费在环境搭建上面的成本。