深入解析前端构建利器：webpack核心概念与基本功能全览

Webpack是一个前端构建工具，它主要用于将用户所写的所有代码，包括js、css、图片等所有格式的文件，打包成一个或多个bundle，供浏览器使用。它支持所有类型文件的打包，并具有分析、压缩和打包代码等功能。Webpack可以将项目中所有的依赖项，例如库、框架、资源文件等都作为模块来处理。

Webpack的核心概念

• Entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。告诉Webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js

• output：出口，告诉Webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

• Module：模块，在Webpack里一切皆模块，一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。

• Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。

• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。

• Plugin：扩展插件，在Webpack构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

Webpack的基本功能

• 代码转换：TypeScript编译成JavaScript、SCSS编译成CSS等等

• 文件优化：压缩JavaScript、CSS、html代码，压缩合并图片等

• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

• 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件

• 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器

• 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过

• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

webpack怎么打包

• 初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果；

• 开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件 监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的run方法开始执行编译；

• 确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去；

• 编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

• 完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry或分包配置生成代码块chunk;

• 输出完成：输出所有的chunk到文件系统。

常用loader

• css-loader读取合并CSS文件

• style-loader把CSS内容注入到JavaScript里

• sass-loader解析sass文件（安装sass-loader，node-sass）

• postcss-loader自动添加浏览器兼容前缀（postcss.config配置）

• url-loader将文件转换为base64 URI。

• vue-loader处理vue文件。

常见Plugins

• HtmlWbpackPlugin自动在打包结束后生成html文件，并引入bundle.js

• cleanwebPackPlugin打包自动删除上次打包文件

Loader 和 Plugin 的不同

不同的作用

• Loader 直译为"加载器"。webpack 将一切文件视为模块，但是 webpack 原生是只能解析 js 文件，如果想将其他文件也打包的话，就会用到 loader。 所以 Loader 的作用是让webpack 拥有了加载和解析非 JavaScript 文件的能力。

• Plugin 直译为"插件"，Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。 在 webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。

不同的用法

• Loader 在 module.rules 中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）。

• Plugin 在 plugins 中单独配置。 类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入。

gulp和webpack的区别

• Gulp强调的是前端开发的工作流程。我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让Gulp执行这些task，从而构建项目的整个前端开发流程。通俗一点来说，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。”

• Webpack是一个前端模块化方案，更侧重模块打包。我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。 Webpack就是需要通过其配置文件（Webpack.config.js）中 entry 配置的一个入口文件（JS文件），然后在解析过程中，发现其他的模块，如scss等文件，再调用配置的loader或者插件对相关文件进行解析处理。