北京网站营销与推广,有哪些游戏网站,很多网站开发没有框架如何制作的,公司网站推广方案前端工程化面试题 webpack有哪些常见的loader? 你用过哪些loader?webpack 有哪些常见的Plugin? 你用过哪些Plugin?说说Loader 和Plugin 的区别作用上结构上 webpack 构建流程简单说一下使用webpack开发时#xff0c;使用过哪些可以提高效率的插件#xff1f;如何优化webp… 前端工程化面试题 webpack有哪些常见的loader? 你用过哪些loader?webpack 有哪些常见的Plugin? 你用过哪些Plugin?说说Loader 和Plugin 的区别作用上结构上 webpack 构建流程简单说一下使用webpack开发时使用过哪些可以提高效率的插件如何优化webpack 的构建速度文件指纹是什么怎么用js的文件指纹设置。css 文件指纹设置图片相关文件指纹设置 是否写过loader简单描写一下编写loader 的思路是否写过Plugin简单描写一下编写Plugin的思路说说Babel 原理source map 是什么生产环境怎么用文件监听原理webpack 热更新原理webpack 事件机制了解吗webpack5 相比于 webpack4 有哪些提升对模块联班的理解Webpack 中有哪些核心概念webpack 的mode是什么什么是代码分割code Splitting如何在webpack中实现 webpack有哪些常见的loader? 你用过哪些loader?
raw-loader: 加载文件原始内容file-loader: 把文件输出到文件夹中在代码中通过相对url 去引用输出的文件夹包含图片、字体url-loader和file-loader类似区别是用户可以设置一个阈值。 大于阈值会交给file-loader 处理小于阈值则返回base64编码一般用来处理图片source-map-loader加载额外的source-map文件方便断点调试image-loader加载并压缩图片文件json-loader加载json文件babel-loader将es6 装换成es5ts-loader将ts 语音转换成 jssass-loader、less-loader都是转换成csscss-loader加载cssstyle-loader 把css注入到js中通过dom操作加载csspostcss-loader扩展css语法使用下一代csseslint-loader、tslint-loader:代码检查。vue-loader加载vue.js单文件组件。
webpack 有哪些常见的Plugin? 你用过哪些Plugin?
define-plugin定义环境变量ignore-plugin忽略部分文件html-webpack-plugin简化html文件创建uglifyjs-webpack-plugin压缩jsmini-css-extract-plugin分离样式文件css提取为单独的文件支持按需加载clean-webpack-plugin目录清理用在下次打包之前把上次打包的内容清理掉webpack-bundle-analyzer可视化webpack输出文件的体积。用于分析当前项目依赖文件的体积大小。speed-measure-webpack-plugin分析每个loader 和 plugin 执行耗时
说说Loader 和Plugin 的区别
作用上
loader 本质是一个函数对接收到的内容进行转换返回转换后的结果webpack只认识js所以loader就相当于翻译官。对其他类型资源进行转译和预处理。plugin是插件它基于事件流框架 Tabable可以扩展webpack功能在webpack运行的生命周期中会广播很多事件。plugin可以监听这些事件在适合的时机通过webpackapi 改变输出的结果。
结构上
loader 在module.rules 中进行配置类型是数组每项都是对象对象包含test 文件类型loader 对应的模块加载器option 对应的参数plugin每个plugin都需要单独配置类型是数组每项plugin是一个plugin实例参数通过构造函数传入。
webpack 构建流程简单说一下
它的运行流程是一个串行的过程。 1、初始化参数从配置文件和shell语句中读取并且合并参数得到最终的参数。 2、开始编译初始化Compiler 对象加载所有的配置插件。执行对象run方法开始编译。 3、确定入口根据配置的entry找到所有入口 4、翻译模块调用所有的loader 对模块进行编译找出模块依赖的模块再递归本步骤直到所有入口依赖的文件都经过处理。 5、完成模块编译经过loader翻译完所有模块后的最终内容以及它们之间的依赖关系。 6、输出资源根据入口以及它们依赖关系组装成一个个包含多个模块的chunk再把每个chunk 转换成单独的文件加入到输出列表中。这里可以修改输出内容并且是修改的最后一个机会 7、输出完成根据配置确定输出的路径和文件名把文件内容写到文件中 在上面流程中webpack 会在特定的时间点广播特定事件插件在监听到事件后调用webpack 提供的API 改变输出结果 使用webpack开发时使用过哪些可以提高效率的插件
webpack-dashboard更友好的展示的展示相关包信息。webpack-merge提取公共配置可以将多个配置文件合并减少代码重复。speed-measure-webpack-plugin分析 loader 和 plugin 的耗时从而分析构建过程中的性能瓶颈。size-plugin监控资源体积变化尽早发现问题。HotModuleReplacementPlugin模块热替换。
如何优化webpack 的构建速度
使用高版本webpack 和 node.js多进程 / 多实例构建 thread-loader压缩代码 、多进程并行压缩‘ 1webpack-paralle-uglify-plugin 可以并行运行 UglifyJS 插件从而更加充分、合理的使用 CPU 资源从而大大减少构建时间 2terser-webpack-plugin 它使用 Terser 库来执行压缩Terser 是一个用于压缩 JavaScript 代码的工具可以对代码进行简单的混淆以及删除未使用的代码和注释等优化。 3 mini-css-extract-plugin 可以避免将 CSS 代码打包到 JavaScript 文件中减少 JavaScript 的体积同时也可以使得 CSS 文件可以被浏览器缓存提高页面加载速度。 图片压缩 imagemin、image-webpack-plugin缩小打包作用域 1)、通过exclude / include 来确定loader 规则范围。 2)、设置resolve.extensions. 3)、resolve.modules提取页面公共的资源 1)、基础包分离 2)、使用html-webpack-externals-plugin 基础包通过cdn引入不打入bundle 中。 3)、使用splitchunksplugin 将代码拆分成多个块以便在不同的环境中按需加载。充分利用缓存提升二次构建速度。 1)、使用 babel-loader 开启缓存 2)、terser-webpack-plugin 开启缓存 3)、cache-loader 或者 hard-source-webpack-plugintree shaking (没有用过的模块代码进行标记从最终bundle 中去掉)
文件指纹是什么怎么用
文件指纹打包后输出的文件名后缀。
hash和整个项目构建相关的只有项目文件改变、项目的hash值就会改变。chunkHash和webpack打包的chunk 相关不同的entry产生不同的chunkHashcontentHash根据文件内容定义hash文件内容不变contentHash就不会变。
js的文件指纹设置。
主要设置output 的 fllename 使用 chunkhash.
module.exports {entry: {spp: ./src/app.js, search: ./src/search.js},output: {filename: [name][chunkhash:8].js,path:_dirname /dist}// chunkhash:8 是设置对应的长度
}css 文件指纹设置
设置MiniCssExtractPlugin
module.exports {entry: {spp: ./src/app.js, search: ./src/search.js},output: {filename: [name][chunkhash:8].js,path:_dirname /dist},plugin: [new MinCssExtractPlugin({ filename:[name][contenthash:8].css}),]
}图片相关文件指纹设置
设置 file-loader 中的name
const path require(path);
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist)}, module: {rules: [{test: /\.(png|svg|jpg|gif)$/,use: [{loader: file-loader,option: {name: img/[name][hash:8].[ext]},}],}]}
}是否写过loader简单描写一下编写loader 的思路
loader是支持链式调用的所有在开发中需要严格遵守单一职责。每个loader负责自己所需要负责的事情。loader是运行在nodejs中的可以调用nodejs api 或者安装第三方模块调用。 传给loader 的原内容是 utf-8编码的字符串 尽可能异步化loader 如果计算量小的化同步也可以loader 是无状态的不应该在loader 中保留状态开发loader 时可以使用 loader-utils schema-utils 工具 还可以通过npm link 和 resolveloader 这两种方式加载本地的loader 方法
是否写过Plugin简单描写一下编写Plugin的思路
webpack运行生命周期中会广播出很多事件让plugin 监听事件特定阶段钩入想要添加的自定义插件内容webpack通过tapable 事件流机制保证插件有序性使系统的扩张性很好
compiler 暴露整个生命周期相关钩子 compliation 暴雷与模块和依赖有关的颗粒度更小的事件钩子 plugin 需要再原型上绑定apply方法才能访问compiler 实例。 插件接收 compiler 、compliation 都是同一个引用。 找到合适的事件点完成想要执行的内容
说说Babel 原理
在 webpack 中Babel 主要用于将 ECMAScript 2015版本的代码转换为向后兼容的 JavaScript 语法以便能够运行在当前和旧版本的浏览器或其它环境中。Babel 的转化过程如下
Parse使用 babylon 将原始代码转换为抽象语法树。Transform通过 babel-traverse 对前面的抽象语法树进行遍历修改并获得新的抽象语法树。Generator使用 babel-generator 将抽象语法树转换为代码。
这三个操作通过 babel-core 合成一个对外的 API 供外界使用。
source map 是什么生产环境怎么用
Source Map 用于将编译、打包、压缩后的代码映射回源代码。
在生产环境中使用 Source Map 有以下几个步骤
在构建过程中生成 Source Map确保你的构建工具如 webpack配置为生成 Source Map。部署包含 Source Map 的构建产物将生成的 Source Map 与构建后的代码一起部署到生产环境。在开发工具中启用 Source Map这样可以在浏览器中查看原始源代码并在调试时将错误和堆栈跟踪映射回原始代码。
使用 Source Map 的好处包括
更好的调试体验可以在生产环境中查看和调试原始代码。提高开发效率更容易找到和解决问题。
然而需要注意的是使用 Source Map 会增加构建产物的大小可能会对性能产生一定影响。因此在生产环境中应谨慎使用并在必要时进行优化。
文件监听原理
Webpack 文件监听的原理是通过轮询判断文件的最后编辑时间是否发生变化。Webpack 首先存储文件的修改时间下次再有修改时会与上次修改时间进行比对。如果发现不一致Webpack 不会立即告诉监听者而是将文件修改缓存起来等待一段时间。在等待期间如果有其他文件发生变化Webpack 会将变化列表一起构建并生成到 bundle 文件夹。
文件监听的目的是在发现文件发生变化时自动重新构建出新的输出文件。开启监听模式有两种方式在启动 Webpack 命令时带上 --watch 参数或在配置 webpack.config.js 中设置 watch: true。构建完成后输出的文件会被放入磁盘中。
webpack 热更新原理
Webpack 的热更新Hot Module Replacement简称 HMR是一种在开发时提供实时更新的功能它使得在修改代码后不需要完全刷新页面就能立即看到更新的效果。HMR 的原理涉及以下几个主要步骤 启动时建立 WebSocket 连接在项目启动时Webpack 会创建与开发服务器的 WebSocket 连接用于在构建完成后接收更新的模块。 构建编译阶段Webpack 在编译时会在每个模块中注入 HMR 运行时代码。该代码会监听源代码的变化并通知 HMR runtime 进行处理。 文件监控Webpack 会监控所有入口文件及其依赖的文件一旦检测到文件发生变化会触发重新编译。 构建完成当编译完成后Webpack 会将编译结果发送给开发服务器并通过 WebSocket 通知客户端有新的资源可用。
webpack 事件机制了解吗 常见事件 before-run开始执行构建之前触发可以用于清理上一次构建的临时文件或状态run开始执行构建触发before-compile开始编译代码前触发可以用于添加一些额外的编辑配置或者预处理代码compile开始编译可用于监听编译过程或编译处理错误this-compilation创建新的 Compilation 对象触发Compilation 对象代表当前编辑过程中的所有状态和信息。compilataion编辑代码期间触发可用于监听编译过程或编译处理错误emit输出文件之前触发修改输出文件或者生成一些附件文件。after-emit输出文件后触发用于清理中间文件done构建完成时触发用于生成构建报告。 事件机制 Webpack采用事件驱动的方式打包web应用其事件机制主要依靠一个很小的核心库tapable来实现。封装了事件订阅发布机制。compile、compilataion 都是tapable类的实例对象
webpack5 相比于 webpack4 有哪些提升
更快的构建速度尤其是开发模式下构建速度明显的提升Tree Shaking优化算法。更准确哪些代码无用更好的优化构建输出的文件大小内置的持久化缓存可以缓存每个模块编译结果加速后续构建支持 WebAssmbly模块联班Module federation 解决模块共享、远程加载。为微前端架构提供支持。
对模块联班的理解
模块联邦Module Federation是 Webpack 5 推出的一个新特性。它是一种模块共用机制允许本地调用远程的模块。通过模块联邦可以解决微前端依赖问题对比 npm 库具有实时性的优势。
Webpack 中有哪些核心概念
Webpack 中有以下几个核心概念
模块Webpack 会将各种资源如 JavaScript、CSS、图像等视为模块。入口指定 Webpack 开始构建的起点。输出定义了最终生成的文件。加载器用于处理特定类型的文件。插件扩展 Webpack 的功能。依赖关系模块之间的依赖关系。模块解析确定如何查找和加载模块。代码分割将代码分割成多个块按需加载。优化例如压缩、合并等提高性能。热更新在运行时自动更新变更的模块。
webpack 的mode是什么
Webpack 的 mode 提供了 mode 配置选项告知 Webpack 使用相应模式的内置优化。mode 的值可以是 development、production 或 none分别代表开发模式、生产模式和无预设模式需要从头开始配置。如果 mode 没有被设置系统会默认使用 production 模式。
development开发模式提供了一些有助于开发和调试的特性更详细的错误信息和警告。实时重新加载。 未压缩的代码以提高调试效率。production生产模式用于准备上线的构建强调优化和性能代码压缩和混淆。 资源优化。none (无预设模式) 关闭任何默认优化选项只执行基本打包功能不做任何额外处理。
什么是代码分割code Splitting如何在webpack中实现
代码分割是将一个应用程序的代码拆分成多个独立的块以便可以按需加载。可以减少初始加载时间提高页面性能在 Webpack 中配置实现代码分割有以下多种方式 1、入口起点配置配置多个入口起点不同部分打包成独立的代码块。 2、动态导入 Dynamic import:可以将模块作为单独的代码块按需加载这样模块需要时才会下载执行 3、使用 SplitChunksPlugin 插件来自动分割代码。自动拆分公共模块并创建独立代码块避免重启加载提高缓存利用率。 4、使用 CommonsChunkPlugin 插件来提取公共模块。
