面试题webpack打包原理,webpack笔试题
本文将和大家分享10个关于webpack的面试问题，看看这十个面试问题你能答对几个。你能全部正确回答吗？
面试问题只是一个介绍，快刷就是背(面试官问你，不一定深入)。要深入理解，还是需要很大的精力；
webpack 的构建流程是什么
初始化参数：解析webpack配置参数，将shell传入的参数和webpack.config.js文件配置的参数合并，形成最终的配置结果；
开始编译：上一步得到的参数初始化编译器对象，注册所有配置好的插件，插件监听webpack build生命周期的事件节点，做出相应的响应，执行对象的run方法开始编译；
确定条目：从配置好的条目开始解析文件构建AST语法树，找出依赖关系，递归下去；
模块编译：在递归中，根据文件类型和加载器配置，调用所有配置好的加载器进行文件转换，然后找出该模块所依赖的模块，然后循环这一步，直到该入口所依赖的文件都在这一步处理完毕；
完成模块编译输出：递归后得到每个文件的结果，包括每个模块及其依赖关系，根据条目或分包配置生成代码块chunk
输出：将所有块输出到文件系统；
webpack 的热更新原理
其实我自己启动了express应用，增加了webpack编译的监控，增加了与浏览器websocket的长连接。当文件更改触发webpack编译并完成时，我会通过sokcet消息告诉浏览器准备刷新。为了降低刷新的成本，我们需要刷新某个模块而不是网页。webpack-dev-server可以支持热更新。通过生成文件的哈希值，我们可以比较需要更新的模块，然后浏览器可以进行热替换。
计算机网络服务器
启动webpack-dev-server服务器创建webpack实例创建服务器服务器服务器添加完成事件webpack的回调编译完成向客户端发送消息创建express应用程序app Set文件系统添加webpack-dev-中间件中间件中间件负责返回生成的文件启动web pack编译并创建http服务器并启动服务。sockjs用于在浏览器和服务器之间建立websocket长连接，创建socket服务器客户端。
web-dev-server/client将监听这个散列消息。收到ok消息后，客户端将执行reloadApp方法来更新它。在reloadApp中，会判断是否支持热更新，如果支持，会发生webpackHotUpdate事件。如果没有，只需刷新webpack/hot/Dev-server.js中的浏览器就会监听webpackHotUpdate事件。在check方法中会调用module.hot.check方法HotModuleReplacement.runtime请求Manifest调用jsonmaintemplate . runtime的hotDownloadMa方法调用jsonmaintemplate . runtime的hotDownloadUpdateChunk方法通过JSONP请求获取最新的模块代码patch js，或者调用jsonmaintemplate . runtime . js的webpackHotUpdate方法然后调用HotMo。duleReplacement.runtime.js的HotAddUpdateChunk方法动态更新模块代码然后调用hotApply方法进行热更新
webpack 打包是hash码是如何生成的
1。在webpack生态系统中有很多方法可以计算hash。
Hashhunkhashcontenthash表示webpack每次编译时生成的哈希值，所有使用该方法的文件哈希都是一样的。每次构建的时候，webpack都会计算一个新的hash。Chunkhash是基于导入文件及其关联的块形成的。一个文件的更改只会影响其关联chunk的hash值，不会影响根据文件内容创建其他文件的contenthash。当文件内容改变时，contenthash也会改变。
2.避免相同的随机值。
webpack在计算完散列后分割块。可能会产生相同的随机值因为这些文件属于同一个chunk，某个文件可以在一个独立的chunk(如entry)中被提及
webpack 离线缓存静态资源如何实现
在配置webpack时，我们可以用html-webpack-plugin注入一个脚本来实现第三方或共享资源的静态存储，在html中注入一段标识，例如，% htmlwebpackplugin . options . loading . html %，在html-webpack-plugin中，可以配置html属性，向其中注入脚本， 使用webpack-manifest-plugin，配置webpack-manifest-plugin生成manifestjson文件，可以用来比较js资源的差异，确定是否替换。 当然，缓存脚本也要写。我们做Cl和CD的时候，也可以通过编辑文件流注入静态脚本，减轻服务器压力，提高性能。可以通过定制Plugin或html-webpack-plugin等周期性函数动态注入前端静态存储脚本
webpack 常见的plugin有哪些
ProvidePlugin:自动加载模块。而不是require和importhtml-webpack-plugin，可以根据模板自动生成html代码，自动引用css和js文件。extract-text-webpack-plugin将引用的样式从js文件单独提取到css文件中。DefinePlugin在编译时配置全局变量，这对于在开发模式和发布模式的构造中允许不同的行为非常有用。HotModuleReplacementPlugin热更新Optimize-css-Assets-webpack-Plugin不同组件中重复的CSS可以快速去除Web Pack的捆绑文件分析工具webpack-bundle-analyzer的权重，以交互可扩展的treemap形式显示捆绑文件。压缩-webpack-plugin生产环境可以采用gzip压缩JS和CSShappypack:通过多进程模型，加快代码构建清理-wenpack-plugin清理每个包下未使用的文件速度-measure-webpack-plugin:可以看到U每个加载器和插件都需要时间执行(整个包需要时间，每个插件和加载器都需要时间)webpack-bundle-analyzer:可视化webpack的输出文件量(业务组件，依托第三方模块
webpack 插件如何实现
webpack本质上是一个事件流机制这个对象在webpack启动时建立一次，所有可操作的设置，包括选项、加载器和插件，都配置好了。当在webpack环境中应用插件时，插件将接收编译器对象的引用。可用于访问webpack的主环境的编译对象表示一个资源版本构建。在运行webpack开发环境中间件时，每次检测到文件变化时，都会创建一个新的编译，从而生成一个新的编译资源。编译对象表示当前模块资源、已编译资源、已更改文件和已跟踪依赖状态的信息。编译对象还提供了许多关键的回调，供插件在进行定制处理时选择使用。创建一个插件函数，在其原型上定义apply方法，并指定webpack本身的一个事件钩子函数来处理webpack内部实例的具体数据处理。处理完成后，调用回调函数MyWebpackPlugin()(
};
//在原型上定义apply方法。
mywebpackplugin . prototype . apply=function(){
//指定要安装到webpack的事件函数
compiler . plugincwebpackeventhook function(compiler)(console . log("这是插件"))；
//函数被调用后webpack提供的回调函数。
回调()
})
webpack有哪些常用的Loader
file-loader:将文件输出到文件夹，通过代码中的相对URL引用输出片段。url-loader:类似于file-loader，但是，它可以用来将软件的内容以base64的形式注入到代码中。转到source-map-loader:加载额外的source map软件，在断点处调试图像加载器。加载压缩地图babel-loader:将ES6转换成ES5css-loader:加载css，具有模块化、压缩、组件引导等特性的Style-loader:将CSS代码注入JavaScript，通过DOM操作加载CSS。Eslint-loader:通过Eslint检查JavaScript代码
webpack如何实现持久化缓存
服务器端设置http cache-control将依赖和运行时打包到不同的Chunk，即作为splitChunk，因为它们几乎是常数延迟加载：使用import()方法，可以动态加载的文件可以分成独立的chunkhash得到自己的chunk hash以保持哈希值稳定：编译过程和文件通信的变化尽可能不影响其他文件hash的计算。对于webpack较低版本生成的增量数字id不稳定的问题，可以基于文件路径生成使用hashedModuleIdsPlugin来解决
如何webpack来优化前端性能？
webpack优化前端性能就是优化webpack的输出结果，使最终打包的结果能够在浏览器中快速有效的交付。
压缩代码：删除多余的代码、注释，简化代码编写等。可以用webpack的UglifyJsPlugin和ParallelUglifyPlugin，CSS Nano (CSS-loader？最小化)压缩css加速CDN:在构建过程中，将引用的静态资源路径修改为CDN上的对应路径。可以通过使用webpacks输出参数和每个加载器的publicPath参数来修改资源路径树抖动：删除代码中永远找不到的段。代码拆分可以通过在启动webpack时添加参数- optimize-minimize来实现：将代码按照路由维度或组件分块，以便按需加载，同时可以充分利用浏览器缓存提取公共第三库：SplitChunksPlugin插件提取公共模块。浏览器缓存可以缓存这些需要频繁更改的常用代码
webpack treeShaking机制的原理
treesharking也称为摇树优化，是一种通过移除更多代码来优化包体积的方法，默认开启生产环境。当代码不运行时，可以分析不必要的代码；使用es6模块的规范引入静态分析，所以在编译时，正确判断加载了哪些模块的静态分析程序流，判断哪些模块和变量没有被使用或引用，然后删除相应的代码。教程推荐：《Webpack入门视频教程》以上是10 webpack的面试题目。你能抓住几个问题？更多详情请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。