webpack面试相关问题

https://blog.csdn.net/weixin_44135121/article/details/89873416
笔记https://blog.csdn.net/z591391960/article/details/105612471

实现一个loader和plugins

1. webpack 性能优化 在进行项目打包的时候，当使用babel-loader进行js兼容时，不需要将node_modules模块下的所有js文件进行打包。

2. webpack loaders中的include/exclude有什么用？

3. 我什么时候在Webpack 2 module.rules中使用’use’和’loader’？

4. 【webpack】中resolveLoader的使用方法

5. 自定义 loader 去删除全局console.log

6. plugin 和 loader 的区别?

loader

• loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译，压缩等，最终一起打包到指定的文件中。处理一个文件可以使用多个 loader，loader 的执行顺序和配置文件是相反的，即最后一个 loader 最先执行，第一个 loader 最后一个执行。第一个执行的 loader 接收源文件内容作为参数，其他 loader 接收前一个执行的loader 的返回值作为参数，最后执行的 loader 会返回此模块的 Javascript 源码。
• 编写自己的 loader 时需要引用官方提供的 loader-utils，调用 loaderUtils.getOptions(this) 拿到 webpack 的配置参数，然后进行自己的处理。loader 本身仅仅是一个函数，接收模块代码的内容，然后返回代码内容转换后的结果，并且一个文件还可以连是的经过多个 loader 转化。
• 一个 loader 的职责是单一的，只需要完成一种转化。如果一个源文件需要经历多步转化才能正常使用，就通过多个loader 去转化。在调用多个 loader 去转化一个文件时，每个 loader 会链式的顺序执行，第一个 loader 将会拿到需处理的原内容，上一个 loader 处理后的结果会传给下一个接着处理。最后的 loader 将处理后的最终结果返回给 Webpack。

plugin

• plugin 功能强大，loader 不能做的都是它做，它的功能要更加丰富。从 打包优化和压缩，到重新定义环境变量，可以处理各种任务。
• plugin 让 webpack 的机制更加灵活，它 在编译过程中留下的一系列生命周期的钩子，通过调用这些钩子来实现在不同编译结果时对原模块进行处理。它的编译是基于事件流来编译的，主要通过 taptable 来实现插件的绑定和执行的，taptable 是基于发布订阅执行的插件架构，是用来创建声明周期钩子的库。调用 complier.hooks.run.tap 开始注册，创建 compilation,基于配置创建 chunks，在通过 parser 解析 chunks，使用模块和依赖管理模块之间的依赖关系，最后使用 template 基于 compilation 数据生成代码结果。

7. webpack怎么处理图片

https://www.jb51.net/article/161272.htm

8. webpack打包过程

9. 提升webpack打包速度

10. webpack机制是什么，主要哪几部分

https://blog.csdn.net/weixin_43334673/article/details/107598708
https://blog.csdn.net/u014168594/article/details/77198729?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs
从启动构建到输出结果一系列过程：

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

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

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

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

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

（6）输出完成：输出所有的chunk到文件系统。

注意：在构建生命周期中有一系列插件在做合适的时机做合适事情，比如UglifyPlugin会在loader转换递归完对结果使用UglifyJs压缩覆盖之前的结果。

11. 常用loader和plugin

loader

file-loader：文件加载。
url-loader：文件加载，可以设置阈值，小于时把文件 base64 编码。
image-loader：加载并压缩图片。
json-loader：webpack 默认包含。
babel-loader：ES6+ 转成 ES5。
ts-loader：ts转化为js。
awesome-typescript-loader：将 ts 转换为 js，性能更好。
css-loader：处理 @import 和 url 这样的外部资源。
style-loader：在 head 创建 style 标签把样式插入。
postcss-loader：扩展 css 语法，使用 postcss 各种插件 autoprefixer，cssnext，cssnano。
eslint-loader,tslint-loader：规范代码。
vue-loader：加载 vue 单文件组件。
i18n-loader：国际化。
cache-loader：性能开销大的 loader 前添加，将结果缓存到磁盘。
svg-inline-loader：压缩后的 svg 注入代码。
source-map-loader：加载 source Map 文件，方便调试。
expose-loader：暴露对象为全局变量。
import-loader，export-loader：可以向模块注入变量或者提供导出模块功能。
raw-loader：可以将文件以字符串形式返回。

plugin

ignore-plugin：忽略文件。
uglifyjs-webpack-plugin：webpack4之前，压缩和混淆代码，不支持 ES6 压缩。
terser-webpack-plugin：webpack4，压缩和混淆代码，支持 ES6 压缩。
webpack-parallel-uglify-plugin：多进程执行代码压缩，提升构建速度。
mini-css-extract-plugin：分离样式文件，css 提取为独立文件，支持按需加载。
serviceworker-webpack-plugin：为网页添加离线缓存功能。
clean-webpack-plugin：目录清理。
speed-measure-webpack-plugin：可以看见每个 loader 和 plugin 执行耗时。
ProvidePlugin：自动加载模块，代替 require 和 import。
html-webpack-plugin：可以根据模板自动生成 html 代码，并自动引用 css 和 js 文件。
extract-text-webpack-plugin：将 JS 文件中引用的样式单例抽离成 css。
DefinePlugin：编译时配置全局变量，这对开发模式和发布模式的构建允许不同的行为非常有用。
HosModuleReplacementPlugin：热更新。
DllPlugin 和 DllReferencePlugin 相互配合，前者第三方包的构建，只构建业务代码。
optimize-css-assets-webpack-plugin：不同组件中重复的 css 可以快速去重。
webpack-bundle-analyzer：一个 webpack 的 bundle 文件分析工具。
compression-webpack-plugin：生产环境可采用 gzip 压缩 JS 和 CSS。
happypack：通过多进程模型，来加速代码构建。