2. 请告诉我更多关于加载器和插件之间的区别。
（我以为他会问我这个，所以我用手遮住了嘴角的笑容）
加载器本质上是一个函数，它转换它接收到的内容并返回转换后的结果。由于Webpack 只理解JavaScript，因此Loader 就成为翻译器，为翻译其他类型的资源执行预处理工作。
该插件基于事件流框架Tapable，它在Webpack执行期间广播许多事件，并允许您监听这些事件并修改输出结果。通过Webpack提供的API获取合适的时间。
加载器配置了module.rules 作为模块解析规则，其类型是数组。每个项目都是一个对象，包括测试（类型文件）、加载器、选项（参数）等属性。
插件在插件内单独配置，它们的类型是数组，每一项都是插件的实例，参数通过构造函数传递。
3.简述Webpack构建流程
Webpack的执行过程是一个串行过程，从头到尾运行如下：
初始化参数：从配置文件和shell语句中读取并合并参数，得到最终参数。
开始编译：使用上一步中获取的参数初始化Compiler 对象，加载任何配置的插件，并通过执行对象的run 方法开始编译。
确定条目：根据配置中的条目查找所有条目文件。
编译模块。从入口文件开始，调用所有已配置的加载器来转换模块，找到该模块所依赖的模块，重复此步骤，直到所有依赖该入口的文件都被该步骤处理完毕。
完成模块编译：在步骤4中使用加载器翻译完所有模块后，您将得到每个模块最终翻译的内容以及模块之间的依赖关系。
输出资源：根据条目和模块之间的依赖关系，将它们组装成包含多个模块的块，并将每个块转换为单独的文件并将其添加到输出列表中。这一步是您修改输出内容的最后机会。
输出完成：确定输出内容后，根据设置确定输出路径和文件名，并将文件内容写入文件系统。
在上述过程中，Webpack 在特定的时间点广播特定的事件，插件监听到感兴趣的事件后可以执行特定的逻辑，并通过调用Webpack 提供的API 来修改执行结果。网页包。
简单地说
初始化：开始构建、读取并合并配置参数、加载插件、实例化编译器
编译：从Entry开始，串行调用各个模块对应的加载器对文件内容进行变换，找到该模块所依赖的模块，递归执行编译过程。
输出：将编译后的模块组合成块，将块转换为文件，并输出到文件系统。
对源码感兴趣的同学可以访问我的另一篇专栏，从源码一窥Webpack 4.x的原理。
4. 在使用Webpack开发时，您使用过哪些插件来提高效率？
（这个问题很实际，用户体验要从小开始）
webpack-dashboard：可以让你以更易理解的方式查看相关的打包信息。
webpack-merge：提取公共配置并减少重复的配置代码。
Speed-measure-webpack-plugin：SMP 用于缩短Webpack 打包过程中的加载器和插件时间分析，并帮助找到构建过程中的性能瓶颈。
size-plugin：监控资源量变化，尽早发现问题。
HotModuleReplacementPlugin：热模块更换
5. 什么是源映射？如何在生产中使用它们？
文件指纹是打包后输出的文件名的后缀。
Hashing：关系到整个项目的构建。当项目文件更改时，整个项目的构建哈希值也会更改。
Chunkhash：与Webpack 打包的块有关。不同的条目将生成不同的块哈希。
Contenthash：根据文件内容定义哈希。如果文件的内容不改变，contenthash 也不会改变。
JS的文件指纹设置
设置输出的文件名并使用chunkhash。
模块. 导出={
条目： {
app: ‘./scr/app.js’,
search: ‘./src/search.js’
},
输出： {
文件名： ‘[名称][chunkhash:8].js’,
path:__目录名+ \’/dist\’
}
}
CSS的文件指纹设置
设置MiniCssExtractPlugin的文件名并使用contenthash。
模块. 导出={
条目： {
app: ‘./scr/app.js’,
search: ‘./src/search.js’
},
输出： {
文件名： ‘[名称][chunkhash:8].js’,
path:__目录名+ \’/dist\’
},
插件：[
新的MiniCssExtractPlugin({
文件名： [名称] [内容哈希：8].css
})
]
}
图片的文件指纹设置
设置文件加载器名称并使用哈希值。
占位符名称和含义
外部资源后缀名
名称文件名
path 到文件的相对路径
文件夹文件所在文件夹
contenthash 文件的内容哈希。默认由md5生成。
hash文件内容的hash默认是通过md5生成的。
代表表情符号文件内容的随机表情符号
const 路径=require(\’路径\’);
模块. 导出={
条目： ‘./src/index.js’,
输出： {
文件名： \”Bundle.js\”,
path:path.resolve(__dirname, \’dist\’)
},
模块：{
规则：[{
test:/.(png|svg|jpg|gif)$/,
使用：[{
loader: \”文件加载器\”,
选项：{
name:‘img/[名称][hash:8].[扩展名]’
}
}]
}]
}
}
11. 在实际项目中，配置文件通常包含数百行。如何确保每个加载程序按预期运行？
您可以使用强制执行加载程序操作的顺序。 Pre 表示在所有常规加载程序之前运行，post 表示在所有加载程序之后运行。 （官方不推荐内联）
12. 如何优化Webpack 构建速度？
（这个问题有点像“请告诉我从输入URL到显示页面的流程”**）
（我想说的是，“你想让我谈多少？”）
（面试官：）
使用更高版本的Webpack 和Node.js
多进程/多实例构建：HappyPack（不再维护）、线程加载器
压缩码
webpack-paralle-uglify-plugin uglifyjs-webpack-plugin 启用并行参数（不支持ES6）
terser-webpack-plugin 开启并行参数
多进程并行压缩
使用mini-css-extract-plugin 将CSS 代码分块提取到单独的文件中，打开cssnano，并通过css-loader 的最小化选项压缩CSS。
图像压缩
使用基于node库的imagemin配置image-webpack-loader（很多自定义选项，可以处理多种图像格式）
缩小包装范围。
排除/包含（确定加载器规则的范围），在resolve.modules中指定第三方模块的绝对路径（减少不必要的搜索）
solve.mainFields仅使用main字段作为入口文件描述字段（为了减少搜索步骤，应考虑运行时依赖的所有第三方模块的入口文件描述字段）。
solve.extensions 最大限度地减少后缀尝试的可能性
noParse 忽略根本不需要解析的库（库不会被解析，而是打包成包；忽略的文件包括诸如import、require 和Define 之类的模块化语句）（请注意，不存在这样的东西）。
IgnorePlugin（完全排除模块）
正确使用别名
提取页面的公共资源。
要通过CDN 部署基础包而不将它们包含在捆绑包中，请使用html-webpack-externals-plugin。使用SplitChunksPlugin分离（发布脚本、基础包、页面发布文件）并替换CommonsChunkPlugin插件。 -在。
基本包分离：
动态链接库：
使用DllPlugin进行分包，使用DllReferencePlugin（索引链接）引用manifest.json。这样就可以将一些永远不会改变的代码先打包到静态资源中，避免重复编译浪费时间。 HashedModuleIdsPlugin可以解决模块的数字ID问题
最大化缓存以加速二次构建。
babel-loader 打开缓存
总结一下
面试前你应该仔细准备。你需要准备好简历中提到的知识和原理。这就是你在面试中与其他人不同的地方。
另一个是表现出谦逊、努力工作和未来继续发展的愿望。企业在招聘人力资源时，更看重稳定的人员。
万事开头难，但是作为程序员坚持几年，还是有很大的成长空间的。关键是坚持。
为了帮助大家更加有效、高效地准备面试，专门整理了电子稿件文件《前端工程师面试手册》。
前端面试问题概述
以上#Other Webpack面试题相关内容摘自网络，仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/93054.html
