【前端面试】之webpack篇

webpack是现在前端开发中不可或缺的一个代码打包工具，在面试中几乎是必考的。因此，掌握webpack是前端工程师一项基本能力，下面就让我们通过常见的面试题来巩固webpack技能。

1.webpack的作用是什么？

• 模块打包：可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。
• 编译兼容：在前端的“上古时期”，手写一堆浏览器兼容代码一直是令前端工程师头皮发麻的事情，而在今天这个问题被大大的弱化了，通过webpack的Loader机制，不仅仅可以帮助我们对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。
• 能力扩展：通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。
  
  

2.webpack的构建流程是怎样的？

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

• 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
• 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
• 确定入口：根据配置中的 entry 找出所有的入口文件
• 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
• 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
• 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
• 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

3.webpack模块打包运行的原理是什么？

文件的解析与构建是一个比较复杂的过程，在webpack源码中主要依赖于compiler和compilation两个核心对象实现。

compiler对象是一个全局单例，他负责把控整个webpack打包的构建流程。 compilation对象是每一次构建的上下文对象，它包含了当次构建所需要的所有信息，每次热更新和重新构建，compiler都会重新生成一个新的compilation对象，负责此次更新的构建过程。

而每个模块间的依赖关系，则依赖于AST语法树。每个模块文件在通过Loader解析完成之后，会通过acorn库生成模块代码的AST语法树，通过语法树就可以分析这个模块是否还有依赖的模块，进而继续循环执行下一个模块的编译解析。

最终Webpack打包出来的bundle文件是一个IIFE的执行函数。

Webpack 实际上为每个模块创造了一个可以导出和导入的环境，本质上并没有修改 代码的执行逻辑，代码执行顺序与模块加载顺序也完全一致。

4.webpack的loader是什么？常见的loader有哪些？

loader的作用是解析模块，是一个模块转换器，⽤于把模块原内容按照需求转换成新内容。webpack是模块打包⼯具，⽽模块不仅仅是js，还可以是css，图⽚或者其他格式，但是webpack默认只知道如何处理js和JSON模块，那么其他格式的模块处理，和处理⽅式就需要loader了。

loader 本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。 因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。

loader 在 module.rules 中配置，作为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数)等属性。

常见的loader有如下几种：

• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
• css-loader：加载CSS，支持模块化、压缩、文件导入等特性
• sass-loader：将SCSS/SASS代码转换成CSS
• ts-loader：将Ts转换成js
• babel-loader：转换ES6、7等js新特性语法
• file-loader：处理静态资源模块
• eslint-loader：通过ESLint检查JavaScript代码
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试
• image-loader：加载并且压缩图片文件
• postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
• mocha-loader：加载 Mocha 测试用例的代码
• cache-loader: 可以在一些性能开销较大的 Loader 之前添加，目的是将结果缓存到磁盘里
  

5.手写webpack的同步loader和异步loader，并且简单描述一下编写思路

（1）同步loader

// 因为this指向的问题，不能采用箭头函数
// module.exports = (content) => {}

module.exports = function(content) {
  return content.replace(/helloworld/g,'xfzeng')
}

（2）异步loader

const sleep = num => new Promise((resolve)=>{
  setTimeout(()=>{
    resolve()
  },num)
})
module.exports = function(content) {
  const callback = this.async();
  (async()=>{
    await sleep(3000)
    content = content.replace(/xfzeng/g,'xfzengwawa')
    callback(null, content)
  })()
}

（3）思路：Loader 支持链式调用，所以开发上需要严格遵循“单一职责”，每个 Loader 只负责自己需要负责的事情。Loader像一个"翻译官"把读到的源文件内容转义成新的文件内容，并且每个Loader通过链式操作，将源文件一步步翻译成想要的样子。

• Loader 运行在 Node.js 中，我们可以调用任意 Node.js 自带的 API 或者安装第三方模块进行调用
• Webpack 传给 Loader 的原内容都是 UTF-8 格式编码的字符串，当某些场景下 Loader 处理二进制文件时，需要通过 exports.raw = true 告诉 Webpack 该 Loader 是否需要二进制数据
• 尽可能的异步化 Loader，如果计算量很小，同步也可以
• Loader 是无状态的，我们不应该在 Loader 中保留状态
• 使用 loader-utils 和 schema-utils 为我们提供的实用工具
• 加载本地 Loader 方法

Npm link
ResolveLoader

6.webpack的plugin是什么？常见的plugin有哪些？

Plugin 就是插件，基于事件流框架 Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

Plugin 在 plugins 中单独配置，类型为数组，每一项是一个 Plugin 的实例，参数都通过构造函数传入。

常见的plugin有如下几种：

• define-plugin：定义环境变量 (Webpack4 之后指定 mode 会自动配置)
• ignore-plugin：忽略部分文件
• html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
• web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用
• uglifyjs-webpack-plugin：不支持 ES6 压缩 (Webpack4 以前)
• terser-webpack-plugin: 支持压缩 ES6 (Webpack4)
• webpack-parallel-uglify-plugin: 多进程执行代码压缩，提升构建速度
• mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin)
• serviceworker-webpack-plugin：为网页应用增加离线缓存功能
• clean-webpack-plugin: 目录清理
• ModuleConcatenationPlugin: 开启 Scope Hoisting
• speed-measure-webpack-plugin: 可以看到每个 Loader 和 Plugin 执行耗时 (整个打包耗时、每个 Plugin 和 Loader 耗时)
• webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)
  
  

7.手写webpack的plugin，并且简单描述一下编写思路

（1）简单的实现

// 1.必须是一个类
// 2.必须要有一个apply函数
// 3.要调用complier API来影响打包结果

class LicenseWebpackPlugin {
  constructor(params) {
    console.log(params)
  }
  apply(complier) {
    complier.hooks.emit.tapAsync('LicenseWebpackPlugin',(compliation,cb)=>{
      console.log(compliation.assets)
      compliation.assets['LICENSE'] = {
        source: function() {
          return 'hahahhah'
        }
      }
      cb();
    })
  }
}

module.exports = LicenseWebpackPlugin;

（2）思路：webpack在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在特定的阶段钩入想要添加的自定义功能。Webpack 的 Tapable 事件流机制保证了插件的有序性，使得整个系统扩展性良好。

• compiler 暴露了和 Webpack 整个生命周期相关的钩子
• compilation 暴露了与模块和依赖有关的粒度更小的事件钩子
• 插件需要在其原型上绑定apply方法，才能访问 compiler 实例
• 传给每个插件的 compiler 和 compilation对象都是同一个引用，若在一个插件中修改了它们身上的属性，会影响后面的插件
• 找出合适的事件点去完成想要的功能

emit 事件发生时，可以读取到最终输出的资源、代码块、模块及其依赖，并进行修改(emit 事件是修改 Webpack 输出资源的最后时机)

watch-run 当依赖的文件发生变化时会触发

• 异步的事件需要在插件处理完任务时调用回调函数通知 Webpack 进入下一个流程，不然会卡住
  
  

8.webpack的Loader和Plugin有不同？

作用不同：

• Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力
• Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果
  

用法不同：

• Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
• Plugin在plugins中单独配置。类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入
  
  

9.如何利用webpack来优化前端性能？

用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。

• 压缩代码：删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
• 利用CDN加速：在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
• 删除没有用的代码（Tree Shaking）：将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
• 提取公共代码
  
  

10.如何提高webpack的构建速度？

• 多入口情况下，使用CommonsChunkPlugin来提取公共代码，通过externals配置来提取常用库
• 利用DllPlugin和DllReferencePlugin预编译资源模块，通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
• 使用Happypack 实现多线程加速编译
• 使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
• 使用Tree-shaking和Scope Hoisting来剔除多余代码
• 充分利用缓存提升二次构建速度

babel-loader：开启缓存
terser-webpack-plugin：开启缓存
使用 cache-loader 或者 hard-source-webpack-plugin

11.sourceMap是什么？在生产环境上怎么用？

sourceMap 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 soucreMap。

map文件只要不打开开发者工具，浏览器是不会加载的。

线上环境一般有三种处理方案：

• hidden-source-map：借助第三方错误监控平台 Sentry 使用
• nosources-source-map：只会显示具体行数以及查看源代码的错误栈。安全性比 sourcemap 高
• sourcemap：通过 nginx 设置将 .map 文件只对白名单开放(公司内网)

注意：避免在生产中使用 inline- 和 eval-，因为它们会增加 bundle 体积大小，并降低整体性能。

12.webpack 中 hash、chunkHash 与 contentHash 区别是什么？

在webpack中有三种hash可以配置：hash，chunkhash，contenthash，区别如下：

• hash：hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值。这样就导致了修改a.js的内容，结果未修改的b.js也被重新构建打包，就没法达到很好的缓存的效果

module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.js",    // 第一个入口文件
    chunk1: "./src/chunk1.js",  // 第二个入口文件
  },
  output: {
    filename: "[name].[hash].js"
  },
};

• chunkHash：chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成hash值，那么只要我们不改动公共库的代码，就可以保证其hash值不会受影响。

module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.js",
    chunk1: "./src/chunk1.js"
  },
  output: {
    filename: "[name].[chunkhash].js"
  }
}

• contentHash：当我们一个JS文件里面引用了CSS文件。如果我们修改了CSS文件内的内容，我们CSS中的内容，会让整个bundle的hash也发生变化。我们要引入CSS，并且要把CSS提出，压缩成一个CSS文件，就要借助一个webpack插件，叫作MiniCssExtractPlugin ,它可以帮我们提取CSS到CSS文件，并且压缩CSS

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.js",
    chunk1: "./src/chunk1.js",
  },
  output: {
    filename: "[name].[chunkhash].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
  ],
};

• 总结：hash所有文件的哈希值都相同；chunkhash根据不同的入口文件进行依赖文件解析，构建对应的chunk，生成对应的哈希值；contenthash计算与文件内容本省有关，主要用于CSS抽离CSS文件
  

13.webpack的文件监听原理是什么？

在发现源码发生变化时，自动重新构建出新的输出文件。

Webpack开启监听模式，有两种方式：

• 启动 webpack 命令时，带上 --watch 参数
• 在配置 webpack.config.js 中设置 watch:true

缺点：每次需要手动刷新浏览器

原理：轮询判断文件的最后编辑时间是否变化，如果某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等 aggregateTimeout 后再执行。

module.export = {
  // 默认false,也就是不开启
  watch: true,
  // 只有开启监听模式时，watchOptions才有意义
  watchOptions: {
    // 默认为空，不监听的文件或者文件夹，支持正则匹配
    ignored: /node_modules/,
    // 监听到变化发生后会等300ms再去执行，默认300ms
    aggregateTimeout: 300,
    // 判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次
    poll: 1000,
  },
}

14.webpack的热更新原理是什么？

Webpack 的热更新又称热替换（Hot Module Replacement），缩写为 HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。

HMR的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS 与浏览器之间维护了一个 Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。

后续的部分(拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？)由 HotModulePlugin 来完成，提供了相关 API 以供开发者针对自身场景进行处理，像react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。

15.如何对bundle体积进行监控和分析？

VSCode 中有一个插件 Import Cost 可以帮助我们对引入模块的大小进行实时监测，还可以使用 webpack-bundle-analyzer 生成 bundle 的模块组成图，显示所占体积。

bundlesize 工具包可以进行自动化资源体积监控。

16.Babel的原理是什么？

大多数JavaScript Parser遵循 estree 规范，Babel 最初基于 acorn 项目(轻量级现代 JavaScript 解析器) Babel大概分为三大部分：

• 解析：将代码转换成 AST

词法分析：将代码(字符串)分割为token流，即语法单元成的数组
语法分析：分析token流(上面生成的数组)并生成 AST

• 转换：访问 AST 的节点进行变换操作生产新的 AST

Taro就是利用 babel 完成的小程序语法转换

• 生成：以新的 AST 为基础生成代码
  
  

17.什么是bundle？什么是chunk？什么是module？

• bundle：是由webpack打包出来的文件
• chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割
• module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块
  
  

18.说说webpack与grunt、gulp的不同？

三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。

• grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。
• webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。
• 所以，从构建思路来说，gulp和grunt需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系；webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工
• 对于知识背景来说，gulp更像后端开发者的思路，需要对于整个流程了如指掌 webpack更倾向于前端开发者的思路