前端面试题-webpack

这篇具有很好参考价值的文章主要介绍了前端面试题-webpack。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.webpack是什么?

模块打包工具,用于将前端资源,如JavaScript、css、图片等打包成可以在浏览器运行的静态资源。可以将多个模块打包成一个或多个bundle。

主要功能:

  1. 模块化:可以将多个模块打包成一个或多个bundle,方便管理维护。
  2. 自动化:可以自动处理和编译JavaScript等文件,提高开发效率。
  3. 性能优化:可压缩、去除无用代码等,提高网页加载速度。
  4. 扩展性:可通过插件进行扩展,实现定制化需求。
2.webpack和vite的区别?
  1.  核心原理:webpack基于静态分析,对项目进行模块化构建,通过打包将多个模块打包成静态资源。vite基于ES Module,通过启动服务器实现动态按需编译,减少不必要的构建过程。

  2. 性能:webpack打包速度较慢,因为需要遍历和解析所有的依赖关系。vite通过动态按需编译和缓存机制,提高了打包速度。

  3. 适用场景:webpack适用各类前端项目,尤其是对模块化和代码结构要求高的项目。vite适合快速开发迭代和实时构建的项目,如单页应用程序、博客网站。

  4. 配置复杂度:webpack配置相对复杂,需要手动配置各种家装器和插件等。

  5. 热更新机制:webpack的热更新需要整个模块链重新打包和替换。vite只针对改动的模块进行更新,提高更新速度。

3.如何配置 Webpack 的入口和输出?
module.exports = {  
  entry: './src/main.js',    //入口
  output: {    //出口
    path: path.resolve(__dirname, './dist'),  
    filename: 'bundle.js'  
  }  
};
4.如何提高webpack的构建速度? 

优化方案:

  1. 代码压缩:js/css/html代码进行压缩。

  2. 图片压缩

  3. tree shaking:摇树,消除死代码,依赖于ES Moudle的静态语法分析。

  4.  减少ES6转ES5的冗余代码,bable-plugin-transform-runtime。

        3.1 usedExports,通过标记某些函数是否被使用,通过Terser来进行优化

module.exports = {
    ...
    optimization:{
        usedExports
    }
}

优化检测

  1. webpack-bundle-analyzer,可看出文件的大小和各自的依赖
  2. speed-measure-webpack-plugin,分析整个打包的耗时,获取每个loader和每个plugins构建所需要的时间
 5.Webpack 配置中用过哪些 Loader ?都有什么作用?
  1. file-loader:将文件输出到指定的文件夹。
  2. url-loader:和file-loader类似,但可以在文件很小的情况下以base64的方式将文件内容注入到代码中。
  3. image-loader:加载并压缩图片。
  4. babel-loader:将ES6转成ES5代码。
  5. css-loader:加载css文件,支持模块化、压缩、文件导入等。
  6. style-loader:将css注入到JavaScript中,通过DOM操作加载css。
  7. eslint-loader:通过eslint检查JavaScript代码。
  8. postcss-loader:自动添加CSS3部分属性的浏览器前缀
6.Webpack 配置中用过哪些 Plugin ?都有什么作用?
  1. html-webpack-plugin:自动生成HTML文件并注入生成的脚本和样式文件

  2. clean-webpack-plugin:打包前,自动清空打包目录

7.loader和plugin的区别?

loader用于处理非JavaScript模块的文件的转换,将文件作为输入并转换为webpack可以处理的模块。plugin用于扩展webpack的功能,可以在webpack构建中的不同阶段执行自定义操作。

8.Mode有什么作用?配置项有哪些?

mode可以告诉webpack使用相应模式完成内置优化。

modules.exports = {
    mode:'none'|'development'|'production'
    //默认none
}
  1.  none:不使用默认优化。
  2. development:将DefinePlugin中process.env.NODE_ENV的值设置为development,为模块和chunk启用有效的名。
  3. production:将DefinePlugin中process.env.NODE_ENV的值设置为production,为模块和chunk启用确定性的混淆名称。
9.source-map是什么?怎么用?

设置source-map后,webpack打包可生bundle.js.map文件,代码报错后,在浏览器可查看原始代码,而不是压缩丑化的代码。

开启source-map:

  1. 配置webpack,devtool:'source-map'
  2. bundle.js文件最后增加注释。 ‘//#sourceMappingUrl = common.bundle.js.map’。浏览器会自动解析注释。
10.bable的底层原理?
  1. 解析阶段,通过词法分析、语法分析,解析成AST抽象语法树。
  2. 转换阶段,将AST树进行遍历,使用plugin生成新的AST树。
  3. 生成阶段,生成新的代码。

pllyfill是什么?

用于在当前的运行环境中模拟不存在的原生API。比如String.includes()是ES6之后的,对于不支持ES6的浏览器,可以引入babel-polyfill,使其支持es6的API。

11.webpack配置网络代理,解决跨域问题?
//webpack.config.js
module.exports = {  
  //...  
  devServer: {  
    // 代理设置  
    proxy: {  
      '/api': { // 需要代理的请求前缀  
        target: 'http://localhost:8000', // 代理请求的目标地址  
        changeOrigin: true, // 如果目标地址是CORS跨域,需要设置为true  
        pathRewrite: {  
          '^/api': '' // 将所有/api开头的请求路径重写为空  
        }  
      }  
    }  
  }  
};
12.webpack性能优化?

1.打包后的结果优化:

        代码分包:

                多入口配置

                动态导入(动态路由 import())

                prefetch(预获取,父chunk加载结束后开始加载)和preload(预加载,在父chunk加载时并行加载)

                文件压缩,js、css、图片进行压缩。terser

//配置多入口
module.exports = {
    entry:{
        index:'./src/index.js',
        main:'./src/main.js'
    },
    output:{
        filename:'[name].bundle.js',
        path:resolveApp('./build')
    }
}

2.打包速度的优化文章来源地址https://www.toymoban.com/news/detail-798623.html

到了这里,关于前端面试题-webpack的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第三节:Node.js 之 Webpack 打包

    官网网址:https://webpack.docschina.org/ 减少文件数量,缩减代码体积,提高浏览器打开速度。 用于分析、并打包代码。支持所有类型文件的打包,其本质是一个第三方模块包。 初始化包环境 安装依赖包 配置package.json 的 scripts(自定义命令) 在根目录下新建 src 文件夹, 所有要

    2024年02月15日
    浏览(53)
  • Node.js入门与 Webpack模块打包工具

    目录 Node.js入门 fs模块-读写文件 path模块-路径处理  压缩前端html 认识URL中的端口号 http模块-创建Web服务 体验 Web 服务除了接口数据以外,还能返回网页资源等  Node.js模块化  ECMAScript标准-默认导出和导入 ECMAScript标准-命名导出和导入  包的概念 npm软件包管理器 npm安装所有依

    2024年02月11日
    浏览(44)
  • Node.JS学习 | Babel | webpack | ES6

    💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Node.JS能够在服务器端运行JavaScript的开放源代码、跨平台运行环境;Node.js采用Google开发的V8运行代码,使用事件驱动、非阻塞IO和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模 let有效避免var的变

    2024年02月07日
    浏览(44)
  • 【前端工程化面试题】使用 webpack 来优化前端性能/ webpack的功能

    这个题目实际上就是来回答 webpack 是干啥的,你对webpack的理解,都是一个问题。 (1)对 webpack 的理解 webpack 为啥提出 + webpack 是啥 + webpack 的主要功能 前端开发通常是基于模块化的,为了提高开发效率,webpack 是一个基于模块的构建工具,是一个用于 js 应用程序的静态模块

    2024年02月20日
    浏览(58)
  • 前端面试题-webpack

    1.webpack是什么? 模块打包工具,用于将前端资源,如JavaScript、css、图片等打包成可以在浏览器运行的静态资源。可以将多个模块打包成一个或多个bundle。 主要功能: 模块化:可以将多个模块打包成一个或多个bundle,方便管理维护。 自动化:可以自动处理和编译JavaScript等文

    2024年01月17日
    浏览(38)
  • 前端Webpack面试题

    备注:本文是总结他人资料,供面试背诵使用 ​ 开发时,我们会使用框架 (React、Vue) ,ES6 模块化语法,Less/Sass 等 CSS 预处理器等语法进行开发,这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS语法才能运行。所以我们需要打包工具帮我们做完这些事。除

    2024年02月13日
    浏览(34)
  • 前端面试:【前端工程化】构建工具Webpack、Parcel和Rollup

    嗨,亲爱的前端开发者!在现代Web开发中,前端工程化变得愈发重要。构建工具如Webpack、Parcel和Rollup帮助我们自动化任务、管理依赖、优化性能等。本文将深入探讨这三个前端构建工具,帮助你了解它们的优点和用途。 1. Webpack: 用途: Webpack是一个强大的模块打包工具。它

    2024年02月11日
    浏览(51)
  • node.js下载安装和报错大全(express、淘宝镜像、webpack、Vue)

    目录 一、概述 二、操作步骤 (一)下载node.js (二) 安装node.js (三)查看环境变量 (四)查看版本信息 (五)新建全局下载包和缓存包位置 (六)配置环境变量 (七)安装express(内嵌http模块) 安装成功 安装失败 解决办法一(最好的办法)  解决办法二(其次) (八

    2024年02月01日
    浏览(77)
  • 【前端工程化面试题目】webpack 的热更新原理

    可以在顺便学习一下 vite 的热更新原理,请参考这篇文章。 首先有几个知识点需要明确 热更新是针对开发过程中的开发服务器的,也就是 webpack-dev-server webpack 的热更新不需要额外的插件,但是需要在配置文件中 devServer 属性中配置 hot: true,需要安装 webpack-dev-server 这个

    2024年02月19日
    浏览(62)
  • 【前端工程化面试题】说一下 webpack 的构建流程

    类似问题是,说一下 vite 的构建流程,参考这篇文章。 初始化流程 从配置文件和shell 语句中读取合并参数,初始化需要使用的插件和执行环境所需要的参数 配置文件默认是 webpack.config.js 编译构建流程 解析入口模块,从入口模块开始串行调用对应的loader 去翻译文件内容,依

    2024年02月20日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包