big webpack

Posted 2021-09-01 web半晨

目录

• • 1、webpack是什么？
  • 2、webpack与grunt、gulp的区别？
  • • 2.1、区别
    • 2.2、总结
  • 3、Webpack的五个核心概念
  • 4、有哪些常见的Loader？你用过哪些Loader？
  • 5、有哪些常见的Plugin？你用过哪些Plugin？
  • 6、Loader和Plugin的区别？

---

1、webpack是什么？

1、一种前端资源构建工具，一个静态模块打包器（nodule bundle）。
2、前端所有资源文件（js/json/css/img…）都会作为模块处理。
3、它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。

---

2、webpack与grunt、gulp的区别？

2.1、区别

1、grunt和gulp是基于任务流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。
2、webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。

---

2.2、总结

从构建思路来说

gulp和grunt需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系。webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工。

从知识背景来说

gulp更像后端开发者的思路，需要对于整个流程了如指掌webpack更倾向于前端开发者的思路。

---

3、Webpack的五个核心概念

1、Entry：入口指示Webpack以哪个文件为入口起点开始打包，分析内部构件依赖图。
2、Output：输出指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。
3、Loader：能让Webpack处理非JavaScript/json文件（Webpack自身只能处理JavaScript/json ）。
4、Plugins：插件可以用于执行范围更广的任务，包括从打包优化和压缩到重新定义环境中的变量。
5、Mode：模式指示Webpack使用相应模式的配置，只有development（开发环境）和production（生产环境）两种模式。

---

4、有哪些常见的Loader？你用过哪些Loader？

1、raw-loader：加载文件原始内容（utf-8）。
2、file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件（处理图片和字体）。
3、url-loader：与file-loader类似，区别是用户可以设置一个阈值，大于阈值会交给file-loader处理，小于阈值时返回文件base64形式编码（处理图片和字体）。
4、source-map-loader：加载额外的Source Map文件，以方便断点调试。
5、svg-inline-loader：将压缩后的SVG内容注入代码中。
7、image-loader：加载并且压缩图片文件。
8、json-loader：加载JSON文件（默认包含）。
9、handlebars-loader：将Handlebars模版编译成函数并返回。
10、babel-loader：把ES6转换成ES5。
11、ts-loader：将TypeScript转换成javascript。
12、awesome-typescript-loader：将TypeScript转换成JavaScript，性能优于ts-loader。
13、sass-loader：将SCSS/SASS代码转换成CSS。
14、css-loader：加载CSS，支持模块化、压缩、文件导入等特性。
15、style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS。
16、postcss-loader：扩展CSS语法，使用下一代CSS，可以配合autoprefixer插件自动补齐CSS3前缀。
17、eslint-loader：通过ESLint检查JavaScript代码。
18、tslint-loader：通过TSLint检查TypeScript代码。
19、mocha-loader：加载Mocha测试用例的代码。
20、coverjs-loader：计算测试的覆盖率。
21、vue-loader：加载Vue.js单文件组件。
22、i18n-loader：国际化。
23、cache-loader：可以在一些性能开销较大的Loader之前添加，目的是将结果缓存到磁盘里。

---

5、有哪些常见的Plugin？你用过哪些Plugin？

1、define-plugin：定义环境变量（Webpack4之后指定mode会自动配置）。
2、ignore-plugin：忽略部分文件。
3、html-webpack-plugin：简化HTML文件创建（依赖于html-loader）。
4、web-webpack-plugin：可方便地为单页应用输出HTML，比html-webpack-plugin好用。
5、uglifyjs-webpack-plugin：不支持ES6压缩（Webpack4以前）。
6、terser-webpack-plugin：支持压缩ES6（Webpack4）。
7、webpack-parallel-uglify-plugin：多进程执行代码压缩，提升构建速度。
8、mini-css-extract-plugin：分离样式文件，CSS提取为独立文件，支持按需加载（替代extract-text-webpack-plugin）。
9、serviceworker-webpack-plugin：为网页应用增加离线缓存功能。
10、clean-webpack-plugin：目录清理。
11、ModuleConcatenationPlugin：开启Scope Hoisting。
12、speed-measure-webpack-plugin：可以看到每个Loader和Plugin执行耗时（整个打包耗时、每个Plugin和Loader耗时）。
13、webpack-bundle-analyzer：可视化Webpack输出文件的体积（业务组件、依赖第三方模块）。

---

6、Loader和Plugin的区别？

1、Loader本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。因为Webpack只认识JavaScript，所以Loader就成了翻译官，对其他类型的资源进行转译的预处理工作。
2、Plugin就是插件，基于事件流框架Tapable，插件可以扩展Webpack的功能，在Webpack运行的生命周期中会广播出许多事件，Plugin可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果。
3、Loader在module.rules中配置，作为模块的解析规则，类型为数组。每一项都是一个Object，内部包含了test（类型文件）、loader、options（参数）等属性。
4、Plugin在plugins中单独配置，类型为数组，每一项是一个Plugin的实例，参数都通过构造函数传入。