Webpack是一个模块打包工具，可以使用webpack管理模块，并且编译输出模块们所需的静态文件。能够很好的管理，打包开发中所用到的html，css，javascript，以及各种静态文件，让开发过程更加高效。
对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。传递的目的就是为了实现模块化，为了更好的管理和维护资源。

1.编译代码能力，提高效率，解决浏览器兼容问题
2.模块整合能力，提高性能，可维护性，解决浏览器频繁请求文件的问题
3.万物皆可模块能力，项目维护性增强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件的加载都可以通过代码控制。

Webpack打包的原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，其中包含应用程序需要的每个模块，将所有这些模块打包成一个或多个bundle。

Wbpack有一个智能解析器，几乎可以处理任何第三方库

Webpack有两种组织模块的依赖方式，同步，异步，异步依赖将作为分割点，形成一个新的块，在优化了依赖树之后，每一个异步区块都将作为一个文件被打包

如何优化webpack打包速度
在某个项目进行需求开发中，该项目是基于webpack3进行打包构建的，在开发过程中打包很慢，开发体验不佳，于是做了简单优化

打包速度慢主要是因为样式文件对js文件的处理loader耗时时间较久
的那个文件发生修改，进行重新编译时，重新编译时耗时其实并不久，但是在浏览器上实际上却花费了更多时间在看到了新的修改

进行代码分割，高达6m的入口文件非常影响体验，优化的第一步就是从代码分割开始，代码分割通过项目中的资源模块按照我们设计的规则打包到不同的bundle中，从未讲题应用的启动成本，提高响应速度

在开发过程中进行webpack缓存是极有必要的，我们在处理样式和js文件的loader之前添加cache-loader将结果缓存在磁盘中，可以显著提升二次构建速度

优化搜索时间，开始打包时获取所有的依赖模块的时间

优化解析时间，根据配置的loader解析响应文件所花费的时间

优化压缩时间，即webpack对代码进行优化压缩所花费的时间

优化二次打包时间，即重新打包时所花费的时间

说说webpack中常见的Loader？解决了什么问题？
Loader用于对模块的源代码进行转换，在import或加载模块时预处理文件

Webpack做的事情，仅仅时分析出各个模块的依赖关系，然后形成资源列表，最终打包生成指定的文件中

在webpack内部，任何文件都是模块，不仅仅是js文件，默认情况下，在遇到import或require加载模块的时候，webpack只支持对js和json文件打包

像css，scss，png等这些类型文件的时候，webpack则无能为力，这时候就需要我们配置loader进行文件内容的解析

Loader存在的特性：

Loader可以是同步的，也可以是异步的

Loader运行在node.js中，并且能够执行任何操作

处了常见的通过package.json的main来将一个npm模块导入loader，还可以在module.rules中使用loader字段直接引入一个模块

插件plugin可以为loader带来更多特性

Loader能够产生额外的任意文件

常见的loader：

Style-loader：将css添加到DOM的内联样式styles中

Css-loader:允许将css文件通过reuire的方式引入，并返回css代码

Less-loader：处理less

Sass-loader:处理sass

File-loader：分发文件到output目录并返回相对路径

Url-loader：和file-loader类似，但是文件小于设定的limit

Babel-loader：用baabel来转换es6文件到es。

webpack proxy，即webpack提供的代理服务

基本行为就是接收客户端发送的请求后转发给其他服务器

其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制）

想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-server

#webpack-dev-server
webpack-dev-server是 webpack 官方推出的一款开发工具，将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起

目的是为了提高开发者日常的开发效率，只适用在开发阶段。

在开发阶段， webpack-dev-server 会启动一个本地开发服务器，所以我们的应用在开发阶段是独立运行在 localhost的一个端口上，而后端服务又是运行在另外一个地址上。
所以在开发阶段中，由于浏览器同源策略的原因，当本地访问后端就会出现跨域请求的问题
通过设置webpack proxy实现代理请求后，相当于浏览器与服务端中添加一个代理者
当本地发送请求的时候，代理服务器响应该请求，并将请求转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，最终再由代理服务器将数据响应给本地