更多课程 选择中心


Web培训

400-111-8989

Web培训

2020年前端面试题汇总之Webpack


今天小编要跟大家分享的文章是关于2020年前端面试题汇总之Webpack。正在从事web前端工作和想要换工作的小伙伴们来和小编一起看一看吧,希望本篇文章能够对大家有所帮助。

2020年前端面试题汇总之Webpack

Webpack

1.1 简介

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle.

1.2 核心概念

入口(entry)

指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

可以通过在 webpack 配置中配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src。

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段,来配置这些处理过程

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块

在更高层面,在 webpack 的配置中 loader 有两个目标:

test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。

use 属性,表示进行转换时,应该使用哪个 loader。

注意:Webpack选择了compose方式,即从右到左执行loader

插件(plugins)

插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

plugins需要暴露出一个class, 在new WebpackPlugin()的时候通过构造函数传入这个插件需要的参数,在webpack启动的时候会先实例化plugin再调用plugin的apply方法,插件需要在apply函数里监听webpack生命周期里的事件,做相应的处理

模式(mode)

通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化

// 多个入口module.exports = {

mode: 'production', entry: {

index: ["./src/index.js"], main: ["./src/main.js"] },

output: { path: path.resolve(__dirname, 'dist'),

filename: 'js/[name].[hash:8].js' },

module: {

rules: [{ test: /\.js$/, // 正则匹配文件名

exclude: '/node_modules/', // 排除

use: ['babel-loader']

} }, plugins: [ // 插件 new copyWebpackPlugin([{

from: path.resolve(__dirname, 'public/static'),

to: path.resolve(__dirname, 'dist'),

ignore: ['index.html']

}])}

1.3 基本流程

解析shell和config中的配置项,用于激活webpack的加载项和插件

webpack初始化工作,包括构建compiler对象,初始化compiler的上下文,loader和file的输入输出环境

解析入口js文件,通过对应的工厂方法创建模块,使用acron生成AST树并且遍历AST,处理require的module,如果依赖中包含依赖则遍历build module,在遍历过程中会根据文件类型和loader配置找出合适的loader用来对文件进行转换

调用seal方法,封装,逐次对每一个module,chunk进行整理,生成编辑后的代码

1.4 模块打包

通过fs将模块读取成字符串,然后用warp包裹一下,使之成为一个字符串形式的的函数然后调用 vm.runInNewContext 这样类型的方法,这个字符串会变成一个函数。

这些模块的函数会被存放在数组里,然后进行解析执行。module和export都是传入的对象,webpack会实现require函数,去加载其他模块。

如果是异步模块,则会通过jsonp的形式去加载该模块打包好生成的chunk。异步加载模块可以使用import和require.ensure函数,函数将会返回一个promise。

上面方法都是公共的,可以抽离成模板的js文件,webpack负责做依赖分析,并将模块读成函数填充入数组。(这里说的只是js的模块)

下面附上简易版的代码

<!-- 同步模块 -->var moduleDepList = [ {'./moduleA': 1}, // module[0] 的依赖 他依赖moduleA 且 moduleA的下标在moduleList 中 为 1 {}] function require(id, parentId) { var currentModlueId = parentId !== undefined ? moduleDepList[parentId][id] : id var module = {exports: {}} var moduleFunc = moduleList[currentModlueId] moduleFunc(id => require(id, currentModlueId), module, module.exports) return module.exports}

<!-- 异步模块 -->var cache = {}

window.__jsonp = function(chunkId, moduleFunc) { var chunk = cache[chunkId] var resolve = chunk[0] var module = {exports: {}} moduleFunc(require, module, module.exports) resolve(module.exports)}

require.ensure = function(chunkId, parentId) { var currentModlueId = parentId !== undefined ? moduleDepList[parentId][chunkId] : chunkId var currentChunk = cache[currentModlueId]

if (currentChunk === undefined) { var $script = document.createElement('script') $script.src = `chunk.${chunkId}.js` document.body.appendChild($script)

var promise = new Promise(function(resolve) { var chunkCache = [resolve] // 数组形式是为了保存promise chunkCache.status = true // 异步模块加载中 如果有别的包 在 异步加载在模块 那么下面的 cache[chunkId] = chunkCache }) cache[chunkId].push(promise) return promise }

if (currentChunk.status) { return currentChunk[1] // 这里的promise 这里的就直接返回promise 这样模块只会加载一次 } return currentChunk}

代码地址:https://github.com/zty1205/react-recruit/tree/master/src/_webpack

1.5 热更新

client 和 server 建立一个 websocket 通信

当有文件发生变动(如fs.watchFile)的时候,webpack编译文件,并通过 websocket 向client发送一条更新消息

client 根据收到的hash值,通过ajax获取一个 manifest 描述文件

client 根据manifest 获取新的JS模块的代码

当取到新的JS代码之后,会更新 modules tree,(installedModules)调用之前通过 module.hot.accept 注册好的回调,可能是loader提供的,也可能是你自己写的

manifest: 描述资源文件对应关系如下,打包后的文件拥有了hash值,所以需要进行映射。

{ "a.js": "a.41231243.js"}

1.6 plugin

1.6.1如何开发一个plugin

一个 JavaScript 命名函数。

在插件函数的 prototype 上定义一个 apply 方法。

指定一个绑定到 webpack 自身的事件钩子。

处理 webpack 内部实例的特定数据。

功能完成后调用 webpack 提供的回调。

tapable 工具,它提供了 webpack 插件接口的支柱

// 一个 JavaScript 命名函数。function plugin() {};

// 在插件函数的 prototype 上定义一个 `apply` 方法。plugin.prototype.apply = function(compiler) { // 指定一个挂载到 webpack 自身的事件钩子。 compiler.plugin('webpacksEventHook', function(compilation, callback) { callback(); }); // 使用taptable的写法 //基本写法 compiler.hooks.someHook.tap(...) //如果希望在entry配置完毕后执行某个功能 compiler.hooks.entryOption.tap(...) //如果希望在生成的资源输出到output指定目录之前执行某个功能 compiler.hooks.emit.tap(...)};

官网地址:#/api/plugins/

1.6.2 Compiler和Compliation 对象和钩子

对象

compiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立,并配置好所有可操作的设置,包括 options,loader 和 plugin。

compilation 对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时,每当检测到一个文件变化,就会创建一个新的 compilation,从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调,以供插件做自定义处理时选择使用

钩子:总体分成两大类:Compiler和Compliation

Compiler暴露了和webpack整个生命周期相关的钩子

Compilation暴露了与模块和依赖有关的粒度更小的事件钩子,官方文档中的说法是模块会经历加载(loaded),封存(sealed),优化(optimized),分块(chunked),哈希(hashed)和重新创建(restored)这几个典型步骤,从上面的示例可以看到,compilation是Compiler生命周期中的一个步骤,使用compilation相关钩子的通用写法为:

compiler.hooks.compilation.tap('SomePlugin',function(compilation, callback){ compilation.hooks.someOtherHook.tap('SomeOtherPlugin,function(){ .... })});

1.6.3 钩子的类型

同步钩子

syncHook: 不关心返回值

syncBailHook: 有一个返回值不为null就跳过剩下的逻辑

SyncWaterfallHook: 下一个任务要拿到上一个任务的返回值

SyncLoopHook: 监听函数返回true表示继续循环,返回undefine表示结束循环

异步钩子

AsyncParallelHook: 异步并发执行,仍是单线程

AsyncParallelBailHook: 异步并发执行,有一个失败了,其他的都不用走了

AsyncSeriesHook: 异步串行执行

AsyncSeriesBailHook: 异步串行执行,有一个返回值不为null就跳过剩下的逻辑

AsyncSeriesWaterfallHook: 异步串行执行,下一个任务要拿到上一个任务的返回值

1.7 常见plugin

clean-webpack-plugin: 在构建之前删除上一次build的文件夹

copy-webpack-plugin: 复制文件或文件夹到生成后的目录

extract-text-webpack | mini-css-extract-plugin: 将所有入口的chunk(entry chunks)中引用的 *.css,移动到独立分离的 CSS 文件

html-webpack-plugin: 将build后生成的资源以标签的形式嵌入到HTML模板内

hot-module-replacement: 模块热更新

1.8 常见loader

babel-loader: 语法,源码转换以便能够运行在当前和旧版本的浏览器或其他环境中

css-loader: 配合style-loader可以解析在js中引入的css文件,并以<style>便签将css-loader内部样式注入到我们的HTML页面

file-loader: 可以解析js中require的文件,输出到输出目录并返回 public URL

html-loader: 可以对HTML模板中指定哪个标签属性组合(tag-attribute combination)元素应该被此 loader 处理

less-loader: 依赖less,可以将less编译成css

postcss-loader: 配合一些plugin如cssnano,autoprefixer可以对css进行压缩,优化,自动补足前缀等

scss-loader: 配合node-scss,可以将scss编译成css

style-loader: 配合css-loader可以解析在js中引入的css文件,并以<style>便签将css-loader内部样式注入到我们的HTML页面

url-loader: url-loader 功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL(base64)

1.9 常见打包优化

使用dll

移除prefetch, preload,关闭sourceMap

webpack-bundle-analyzer打包分析,将大的模块可能的移至CDN。打包时间分析使用speed-measure-webpack-plugin

开启gzip,服务器需要支持

使用多线程:thread-loader或HappyPack

webpack4内置的terser启动多线程压缩

对项目进行拆分

推荐文章:https://blog.csdn.net/lunahaijiao/article/details/104509446/

以上就是小编今天为大家分享的关于2020年前端面试题汇总之Webpack的文章,希望本篇文章能够对想要换工作的web前端工程师们有所帮助,想要了解更多web前端知识记得关注达内web培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的web前端工程师。

文章来源:原创 const弓长张 总在落幕后

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:Web前端面试必备面试题整理
下一篇:2020年前端面试题汇总之常见性能优化

2022年Web前端面试题目汇总!

Web前端面试题汇总(建议收藏)

2022年Web前端工程师面试题目汇总(附答案详解)

2022年前端常见面试题整理汇总(附答案详解)

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省