webpack十连问你能接住几题

　　前言面试题只是一个引子，快速刷题就是背（面试官问你，但是他不一定很深入），想深入理解还是得花大量精力；webpack的构建流程是什么初始化参数：解析webpack配置参数，合并shell传入和webpack。config。js文件配置的参数，形成最后的配置结果；开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的run方法开始执行编译；确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去；编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry或分包配置生成代码块chunk；输出完成：输出所有的chunk到文件系统；webpack的热更新原理
　　其实是自己开启了express应用，添加了对webpack编译的监听，添加了和浏览器的websocket长连接，当文件变化触发webpack进行编译并完成后，会通过sokcet消息告诉浏览器准备刷新。而为了减少刷新的代价，就是不用刷新网页，而是刷新某个模块，webpackdevserver可以支持热更新，通过生成文件的hash值来比对需要更新的模块，浏览器再进行热替换
　　服务端启动webpackdevserver服务器创建webpack实例创建server服务器添加webpack的done事件回调编译完成向客户端发送消息创建express应用app设置文件系统为内存文件系统添加webpackdevmiddleware中间件中间件负责返回生成的文件启动webpack编译创建http服务器并启动服务使用sockjs在浏览器端和服务端之间建立一个websocket长连接创建socket服务器
　　客户端webpackdevserverclient端会监听到此hash消息客户端收到ok消息后会执行reloadApp方法进行更新在reloadApp中会进行判断，是否支持热更新，如果支持的话发生webpackHotUpdate事件，如果不支持就直接刷新浏览器在webpackhotdevserver。js会监听webpackHotUpdate事件在check方法里会调用module。hot。check方法HotModuleReplacement。runtime请求Manifest通过调用JsonpMainTemplate。runtime的hotDownloadManifest方法调用JsonpMainTemplate。runtime的hotDownloadUpdateChunk方法通过JSONP请求获取最新的模块代码补丁js取回来或会调用JsonpMainTemplate。runtime。js的webpackHotUpdate方法然后会调用HotModuleReplacement。runtime。js的hotAddUpdateChunk方法动态更新模块代码然后调用hotApply方法进行热更webpack打包是hash码是如何生成的
　　1。webpack生态中存在多种计算hash的方式hashchunkhashcontenthash
　　hash代表每次webpack编译中生成的hash值，所有使用这种方式的文件hash都相同。每次构建都会使webpack计算新的hash。chunkhash基于入口文件及其关联的chunk形成，某个文件的改动只会影响与它有关联的chunk的hash值，不会影响其他文件contenthash根据文件内容创建。当文件内容发生变化时，contenthash发生变化
　　2。避免相同随机值webpack在计算hash后分割chunk。产生相同随机值可能是因为这些文件属于同一个chunk，可以将某个文件提到独立的chunk（如放入entry）webpack离线缓存静态资源如何实现在配置webpack时，我们可以使用htmlwebpackplugin来注入到和html一段脚本来实现将第三方或者共用资源进行静态化存储在html中注入一段标识，例如lt；HtmlWebpackPlugin。options。loading。html，在htmlwebpackplugin中即可通过配置html属性，将script注入进去利用webpackmanifestplugin并通过配置webpackmanifestplugin，生成manifestjson文件，用来对比js资源的差异，做到是否替换，当然，也要写缓存script在我们做Cl以及CD的时候，也可以通过编辑文件流来实现静态化脚本的注入，来降低服务器的压力，提高性能可以通过自定义plugin或者htmlwebpackplugin等周期函数，动态注入前端静态化存储scriptwebpack常见的plugin有哪些ProvidePlugin：自动加载模块，代替require和importhtmlwebpackplugin可以根据模板自动生成html代码，并自动引用css和js文件extracttextwebpackplugin将js文件中引用的样式单独抽离成css文件DefinePlugin编译时配置全局变量，这对开发模式和发布模式的构建允许不同的行为非常有用。HotModuleReplacementPlugin热更新optimizecssassetswebpackplugin不同组件中重复的css可以快速去重webpackbundleanalyzer一个webpack的bundle文件分析工具，将bundle文件以可交互缩放的treemap的形式展示。compressionwebpackplugin生产环境可采用gzip压缩JS和CSShappypack：通过多进程模型，来加速代码构建cleanwenpackplugin清理每次打包下没有使用的文件speedmeasurewebpackplugin：可以看至U每个Loader和Plugin执行耗时（整个扌丁包耗时、每个Plugin和Loader耗时）webpackbundleanalyzer：可视化Webpack输出文件的体积（业务组件、依赖第三方模块webpack插件如何实现webpack本质是一个事件流机制，核心模块：tabable（SyncAsync）Hooks构造出Compiler（编译）Compiletion（创建bundles）compiler对象代表了完整的webpack环境配置。这个对象在启动webpack时被一次性建立，并配置好所有可操作的设置，包括options、loader和plugin。当在webpack环境中应用一插件时，插件将收到此compiler对象的引用。可以使用它来访问webpack的主环境compilation对象代表了一次资源版本构建。当运行webpack开发环境中间件时，每当检测到一个文件变化，就会创建一个新的compilation，从而生成一个新的编译资源。一个compilation对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态的信息。compilation对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用创建一个插件函数，在其prototype上定义apply方法，指定一个webpack自身的事件钩子函数内部处理webpack内部实例的特定数据处理完成后，调用webpack提供的回调函数functionMyWebpackPlugin（）（｝；prototype上定义apply方法MyWebpackPlugin。prototype。applyfunction（）｛指定一个事件函数挂载到webpackcompiler。pluginCwebpacksEventHookfuncion（compiler）（console。log（这是一个插件）；功能完成调用后webpack提供的回调函数callback（）｝）webpack有哪些常的Loaderfileloader：把件输出到个件夹中，在代码中通过相对URL去引输出的件urlloader：和fileloader类似，但是能在件很的情况下以base64的式把件内容注到代码中去sourcemaploader：加载额外的SourceMap件，以便断点调试imageloader：加载并且压缩图件babelloader：把ES6转换成ES5cssloader：加载CSS，持模块化、压缩、件导等特性styleloader：把CSS代码注到JavaScript中，通过DOM操作去加载CSS。eslintloader：通过ESLint检查JavaScript代码webpack如何实现持久化缓存服务端设置http缓存头（cachecontrol）打包依赖和运行时到不同的chunk，即作为splitChunk，因为他们几乎是不变的延迟加载：使用import（）方式，可以动态加载的文件分到独立的chunk，以得到自己的chunkhash保持hash值的稳定：编译过程和文件内通的更改尽量不影响其他文件hash的计算，对于低版本webpack生成的增量数字id不稳定问题，可用hashedModuleIdsPlugin基于文件路径生成解决如何webpack来优化前端性能？
　　webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运快速效。压缩代码：删除多余的代码、注释、简化代码的写法等等式。可以利webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS件，利cssnano（cssloader？minimize）来压缩css利CDN加速：在构建过程中，将引的静态资源路径修改为CDN上对应的路径。可以利webpack对于output参数和各loader的publicPath参数来修改资源路径TreeShaking：将代码中永远不会到的段删除掉。可以通过在启动webpack时追加参数optimizeminimize来实现CodeSplitting：将代码按路由维度或者组件分块（chunk），这样做到按需加载，同时可以充分利浏览器缓存提取公共第三库：SplitChunksPlugin插件来进公共模块抽取，利浏览器缓存可以期缓存这些需频繁变动的公共代码webpacktreeShaking机制的原理treeShaking也叫摇树优化，是一种通过移除多于代码，来优化打包体积的，生产环境默认开启。可以在代码不运行的状态下，分析出不需要的代码；利用es6模块的规范ES6Module引入进行静态分析，故而编译的时候正确判断到底加载了那些模块静态分析程序流，判断那些模块和变量未被使用或者引用，进而删除对应代码
　　转自：https：juejin。cnpost7002839760792190989