常见的Webpack面试题及答案

Webpack是目前比较物流的前端构建工具,它基于入口,用不同的Loader来处理不同的文件。我们来看一下常见的Webpack面试题及答案吧,希望对你有帮助。

Webpack的核心概念

Entry:入口,Webpack执行构建的第一步将从Entry开始,可抽象成输入。告诉Webpack要使用哪个模块作为构建项目的起点,默认为./src/index.js

**output:**出口,告诉Webpack在哪里输出它打包好的代码以及如何命名,默认为./dist

Module:模块,在Webpack里一切皆模块,一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。

Chunk:代码块,一个Chunk由多个模块组合而成,用于代码合并与分割。

Loader:模块转换器,用于把模块原内容按照需求转换成新内容。

Plugin:扩展插件,在Webpack构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。

Webpack的基本功能有哪些?

代码转换:TypeScript编译成JavaScript、SCSS编译成CSS等等

文件优化:压缩JavaScript、CSS、html代码,压缩合并图片等

代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件

自动刷新:监听本地源代码的变化,自动构建,刷新浏览器

代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过

自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

Webpack如何配置多入口文件?

复制代码
entry: { home: resolve(__dirname, "src/home/index.js"), about: resolve(__dirname, "src/about/index.js")}

用于描述入口的对象。你可以使用如下属性:

dependOn:当前入口所依赖的入口。它们必须在该入口被加载前被加载。

**filename:**指定要输出的文件名称。

**import:**启动时需加载的模块。

library:指定library选项,为当前entry构建一个library。

runtime:运行时chunk的名字。如果设置了,就会创建一个新的运行时chunk。在Webpack 5.43.0之后可将其设为false以避免一个新的运行时chunk。

**publicPath:**当该入口的输出文件在浏览器中被引用时,为它们指定一个公共URL地址

常用loader

css-loader读取合并CSS文件

style-loader把CSS内容注入到JavaScript里

sass-loader解析sass文件(安装sass-loader,node-sass)

postcss-loader自动添加浏览器兼容前缀(postcss.config配置)

url-loader将文件转换为base64 URI。

vue-loader处理vue文件。

常见Plugins

HtmlWbpackPlugin自动在打包结束后生成html文件,并引入bundle.js

cleanwebPackPlugin打包自动删除上次打包文件

相关推荐
蓝胖子的多啦A梦1 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想4 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z12 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982418 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴23 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干27 分钟前
【JS/Vue3】关于Vue引用透传
前端
GDAL28 分钟前
Node.js REPL 教程
node.js·编辑器·vim
JavaDog程序狗29 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder33 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder36 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github