9 个基本的 webpack 面试问题和答案

Webpack 是一个开源的 JavaScript 模块打包工具。它提取依赖项并生成依赖关系图，使 Web 开发者能够使用模块化方法开发 Web 应用。它还能提取各种资源，例如 JavaScript、CSS、字体、图像和 HTML，然后将这些资源转换为方便浏览器使用的格式。Webpack 的真正强大之处在于其各个部分的总和。

最初发表于FullStack.Cafe - 让你的技术面试不再失败

Q1：什么是webpack？

主题：Webpack
难度：⭐

Webpack是一款构建工具，它将你所有的资源（包括 JavaScript、图片、字体和 CSS）放在一个依赖关系图中。Webpack 允许你require()在源代码中指向本地文件（例如图片），并决定它们在最终的 JavaScript 打包过程中的处理方式，例如将路径替换为指向 CDN 的 URL。

🔗来源： blog.andrewray.me

Q2：列举一些使用 webpack 的好处

主题：Webpack
难度：⭐⭐⭐

依赖图中的 Webpack 和静态资源有很多好处。以下列举一些：

• 消除无效资源。dist/这非常有效，尤其适用于 CSS 规则。您只需将应用程序实际需要的图片和 CSS 构建到文件夹中即可。
• 更轻松地进行代码拆分。例如，由于您知道文件Homepage.js只需要特定的 CSS 文件，因此 Webpack 可以轻松构建homepage.css文件，从而大大减少初始文件大小。
• 您可以控制资源的处理方式。如果图片小于特定尺寸，您可以将其直接以 base64 编码添加到 JavaScript 中，以减少 HTTP 请求。如果 JSON 文件过大，您可以通过 URL 加载。您可以require('./style.less')这样做，Less 会自动将其解析为原生 CSS。
• 稳定的生产部署。您不会意外部署缺少图片或样式过时的代码。
• Webpack 一开始会拖慢你的速度，但如果使用得当，会带来显著的速度提升。你可以获得热页面重新加载、真正的 CSS 管理、CDN 缓存清除（因为 Webpack 会自动将文件名更改为文件内容的哈希值）等等。

Webpack 是 React 社区采用的主要构建工具。

🔗来源： blog.andrewray.me

问题 3：列举一些你认为非常重要且有用的插件

主题：Webpack
难度：⭐⭐⭐

• CommonsChunkPlugin - 创建一个单独的文件（称为块），由多个入口点之间共享的公共模块组成。
• DefinePlugin - 允许您创建可以在编译时配置的全局常量。
• HtmlWebpackPlugin - 简化 HTML 文件的创建以提供您的 webpack 包。
• ExtractTextWebpackPlugin - 将文本从一个或多个包中提取到单独的文件中。
• CompressionWebpackPlugin - 准备资产的压缩版本，以便通过内容编码为其提供服务。

🔗来源： webpack.js.org

问题 4：Webpack 给出了依赖图。这是什么意思？

主题：Webpack
难度：⭐⭐⭐

任何时候一个文件依赖于另一个文件，webpack 都会将其视为依赖项。这使得 webpack 可以将非代码资源（例如图片或 Web 字体）作为依赖项提供给你的应用程序。

Webpack 允许您在本地“静态资产”上使用 require()：

<img src={ require('../../assets/logo.png') } />  

当 webpack 处理你的应用程序时，它会从命令行或配置文件中定义的模块列表开始。从这些入口点开始，webpack 会递归地构建一个包含应用程序所需的每个模块的依赖关系图，然后将所有这些模块打包成少量的 bundles（通常只有一个），以供浏览器加载。

源require('logo.png')代码实际上永远不会在浏览器（或 Node.js）中执行。Webpack 会构建一个新的 JavaScript 文件，将require()调用替换为有效的 JavaScript 代码（例如 URL）。打包后的文件才是 Node 或浏览器执行的内容。

🔗来源： blog.andrewray.me

Q5：列举一些Webpack的陷阱

主题：Webpack
难度：⭐⭐⭐⭐

Webpack 并不完美并且存在一些缺陷。

• 文档糟透了。语言常常令人困惑，比如“webpack 获取带有依赖项的模块，并生成代表这些模块的静态资源”。什么？甚至页面布局也存在问题，侧边栏条目随机出现，无法点击，阅读时还会显示动画徽标。
• 源代码同样令人痛苦。
• 对于新手来说，配置 Webpack就像一个雷区。配置文件的语法令人困惑。参考一些样板项目中已有的示例会有所帮助。
• Webpack主要由一人维护。社区的快速采用和日益受到关注意味着其生态系统的成熟度远远落后于 React。这带来了一些副作用，例如文档质量低劣。
• Webpack在字符串中引入了一种令人讨厌的微型语言： require("!style!css!less!bootstrap/less/bootstrap.less");这种语法几乎从未使用过，也几乎没有解释过，但它在文档中随处可见。在我看来，这种字符串语言是 Webpack 最大的设计缺陷之一。

🔗来源： blog.andrewray.me

Q6：解释一下 NPM、Bower、Browserify、Gulp、Grunt 和 Webpack 之间的区别？

主题：Webpack
难度：⭐⭐⭐⭐

• npm&bower是包管理器。它们只会下载依赖项，并不知道如何自行构建项目。它们只知道在获取所有依赖项后调用webpack// gulp。grunt
• bower类似于npm，但会构建扁平化的依赖树（不同于npm递归构建）。这意味着npm会获取每个依赖项的依赖项（可能会多次获取相同的依赖项），而 则bower需要您手动添加子依赖项。有时bower和npm会分别用于前端和后端（因为前端的每兆字节都可能很重要）。
• grunt并且gulp是任务运行器，可以自动化所有可以自动化的事情（例如编译 CSS/Sass、优化图像、制作捆绑包并对其进行最小化/转换）。
• gruntvs. gulp（类似于mavenvs.gradle或配置 vs. 代码）。Grunt 基于配置独立的任务，每个任务打开/处理/关闭文件。Gulp 所需的代码量较少，并且基于 Node 流，这使得它能够构建管道链（无需重新打开同一个文件），从而提高速度。
• webpack（webpack-dev-server）- Webpack 是一个构建工具，它将您的所有资产（包括 Javascript、图像、字体和 CSS）放入依赖图中。
• npm/ bower+ 插件可能会取代任务运行器。它们的功能通常相互交叉，因此如果您需要使用gulp/grunt而不是npm+ 插件，则会产生不同的影响。但任务运行器绝对更适合执行复杂的任务（例如，“在每次构建时创建 bundle，从 ES6 转换为 ES5，在所有浏览器模拟器上运行，截取屏幕截图并通过 ftp 部署到 Dropbox”）。
• browserify允许为浏览器打包节点模块。browserifyvsnode实际上require是AMD vs CommonJS。

🔗来源： stackoverflow.com

Q7：webpack 加载器和插件有什么区别？

主题：Webpack
难度：⭐⭐⭐⭐

• 加载器在捆绑包生成期间或之前在单个文件级别工作。
• 插件在 bundle 或 chunk 级别工作，通常在 bundle 生成过程的末尾运行。插件还可以修改 bundle 本身的创建方式。插件比加载器拥有更强大的控制能力。

🔗来源： stackoverflow.com

Q8：解释一下这段代码

主题：Webpack
难度：⭐⭐⭐⭐

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  filename: 'common.js',
  chunks: ['home', 'dashboard']
})

CommonsChunkPlugin是一个内置功能，它会创建一个单独的文件（称为“chunk”），其中包含多个入口点之间共享的通用模块。通过将通用模块从 bundle 中分离出来，生成的 chunk 文件可以在初始阶段加载一次，并存储在缓存中以供后续使用。这可以优化页面速度，因为浏览器可以快速从缓存中加载共享代码，而不必每次访问新页面时都强制加载更大的 bundle。

此代码创建单独的文件：common.js其中包含来自主页和仪表板块的通用模块。

🔗来源： webpack.js.org

Q9：描述一下 webpack 中的 tree shake 机制

主题：Webpack
难度：⭐⭐⭐⭐⭐

Tree Shaking是 JavaScript 中常用的术语，指消除死代码。它依赖于 ES2015 模块语法的静态结构，即 import 和 export。

你可以将你的应用程序想象成一棵树。你实际使用的源代码和库就像这棵树上鲜活的绿色叶子。死代码就像是秋天里枯萎的棕色叶子。为了去除这些枯叶，你必须摇晃这棵树，让它们落下。

但是，如果您的代码确实有一些副作用（导入时执行特殊行为的代码），请使用sideEffects属性：

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]
}

🔗来源： webpack.js.org

感谢🙌的阅读，祝你面试顺利！
更多 FullStack 面试问答，请访问👉 www.fullstack.cafe