Webpack高频面试题

目录

1 谈谈你对webpack的看法

2 webpack的基本功能和工作原理？

前端为什么要进行打包和构建？

webpack的核心概念

webpack构建过程

webpack打包原理

什么是webpack，与gulp,grunt有什么区别

什么是entry,output?

什么是module,chunk,bundle?

如何自动生成webpack配置？

webpack如何配置单页面和多页面的应用程序？

webpack-dev-server和http服务器如nginx有什么区别？

sourceMap

13、Loader机制的作用是什么？

ExtractTextPlugin插件的作用

15、Plugin（插件）的作用是什么？

17、常见Plugins

什么是模块热更新？

HMR热模块更新

dev-server是怎么跑起来的

使用过webpack里面哪些plugin和loader

webpack中babel的实现

提取公用代码

什么是长缓存？在webpack中如何做到长缓存优化？

什么是Tree-shaking？CSS可以Tree-shaking？

webpack-dev-server 和 http服务器的区别

lazy loading（模块懒加载）

ES stage 含义

6、gulp/grunt 与 webpack的区别是什么?

---

Webpack高频面试题

1 谈谈你对webpack的看法

现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决Scss，Less……新增样式的扩展写法的编译工作。

webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。
 

2 webpack的基本功能和工作原理？

• 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
• 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
• 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
• 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

前端为什么要进行打包和构建？

代码层面：

体积更小（Tree-shaking、压缩、合并），加载更快

编译高级语言和语法（TS、ES6、模块化、scss）

兼容性和错误检查（polyfill,postcss,eslint）

研发流程层面：

统一、高效的开发环境

统一的构建流程和产出标准

集成公司构建规范（提测、上线）

webpack的核心概念

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

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

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

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

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

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

webpack构建过程

• 从entry里配置的module开始递归解析entry依赖的所有module
• 每找到一个module，就会根据配置的loader去找对应的转换规则
• 对module进行转换后，再解析出当前module依赖的module
• 这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk
• 最后webpack会把所有Chunk转换成文件输出
• 在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑
   

webpack打包原理

将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载

什么是webpack，与gulp,grunt有什么区别

• webpack是一个模块打包工具，可以递归地打包项目中的所有模块，最终生成几个打包后的文件。
• 区别：webpack支持代码分割，模块化（AMD,CommonJ,ES2015），全局分析

什么是entry,output?

• loader是用来告诉webpack如何转换某一类型的文件，并且引入到打包出的文件中。
• plugins(插件)作用更大，可以打包优化，资源管理和注入环境变量

什么是module,chunk,bundle?

bundle：是由webpack打包出来的文件

chunk：是指webpack在进行模块依赖分析的时候，代码分割出来的代码块

module：是开发中的单个模块

如何自动生成webpack配置？

可以用一些官方脚手架

• webpack-cli
• vue-cli

• // 首先安装
  npm install -g @vue/cli
  // 新建项目hello
  vue create hello
  

• nuxt-cli

• // 确保安装了npx,npx在npm5.2.0默认安装了
  // 新建项目hello
  npx create-nuxt-app hello
  

  webpack如何配置单页面和多页面的应用程序