前端webpack
和大家一起谈谈webpack
首先对Webpack的理解
webpack 是一个静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle。
webpack 就像一条生产线,要经过一系列处理流程(loader)后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。
插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。
常见的loader
- file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
- url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
- source-map-loader：加载额外的 Source Map 文件，以方便断点调试
- image-loader：加载并且压缩图片文件
- babel-loader：把 ES6 转换成 ES5
- css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
- style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
- eslint-loader：通过 ESLint 检查 JavaScript 代码
常见的plugin
- define-plugin：定义环境变量
- terser-webpack-plugin：通过TerserPlugin压缩ES6代码
- html-webpack-plugin 为html文件中引入的外部资源，可以生成创建html入口文件
- mini-css-extract-plugin：分离css文件
- clean-webpack-plugin：删除打包文件
- happypack：实现多线程加速编译
webpack与grunt，gulp的不同
Webpack与Gulp、Grunt没有什么可比性，它可以看作模块打包机，通过分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
他们的工作方式也有较大区别：
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。
grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。
webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。
所以总结一下：
从构建思路来说
gulp和grunt需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系
webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工
对于知识背景来说
gulp更像后端开发者的思路，需要对于整个流程了如指掌 webpack更倾向于前端开发者的思路
webpack的优缺点
优点:
- 专注于处理模块化的项目，能做到开箱即用，一步到位
- 可通过plugin扩展，完整好用又不失灵活
- 使用场景不局限于web开发
- 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展
- 良好的开发体验
缺点：
webpack的缺点是只能用于采用模块化开发的项目
分别介绍bundle，chunk，module是什么
bundle：是由webpack打包出来的文件，
chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割。
module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块。
什么是loader？什么是plugin？
loader：模块转换器，用于将模块的原内容按照需要转成你想要的内容
plugin：在webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果，是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)。
1、不同的作用
1,1）Loader 直译为"加载器"。webpack 将一切文件视为模块，但是 webpack 原生是
只能解析 js 文件，如果想将其他文件也打包的话，就会用到 loader。 所以 Loader 的作用是让
webpack 拥有了加载和解析非 JavaScript 文件的能力。
1,2）Plugin 直译为"插件"，Plugin 可以扩展 webpack 的功能，让 webpack 具有更多
的灵活性。 在 webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在
合适的时机通过 webpack 提供的 API 改变输出结果
2、不同的用法
2,1）Loader 在 module.rules 中配置，也就是说他作为模块的解析规则而存在。 类型
为数组，每一项都是一个 Object，里面描述了对于什么类型的文件（test），使用什么加载
(loader)和使用的参数（options）
2,2）Plugin 在 plugins 中单独配置。 类型为数组，每一项是一个 plugin 的实例，参
数都通过构造函数传入
下篇文章我会分享如何是使用webpack来优化前端项目哦