Webpack 常见面试题

整理自：

web前端面试 - 面试官系列

话说校招生整这个，真的是越来越卷了呢

Webpack中常见的Loader？解决了什么问题？

• style-loader: 将css添加到DOM的内联样式标签style里
• css-loader :允许将css文件通过require的方式引入，并返回css代码
• less-loader: 处理less
• sass-loader: 处理sass
• postcss-loader: 用postcss来处理CSS
• autoprefixer-loader: 处理CSS3属性前缀，已被弃用，建议直接使用postcss
• file-loader: 分发文件到output目录并返回相对路径
• url-loader: 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url
• html-minify-loader: 压缩HTML
• babel-loader :用babel来转换ES6文件到ES

Webpack 插件开发实践

Webpack 性能优化

• 使用动态加载，减少首屏资源加载量；
• 使用 externals 外置依赖、Tree-Shaking、Scope Hoisting 特性，减少应用体积；
• 正确使用 [hash] 占位符，优化 HTTP 资源缓存效率；

动态加载

Webpack 默认会将同一个 Entry 下的所有模块全部打包成一个产物文件 —— 包括那些与页面 关键渲染路径 无关的代码，这会导致页面初始化时需要花费多余时间去下载这部分暂时用不上的代码，影响首屏渲染性能，例如：

Webpack 链式调用模型

Webpack 图像处理

参考来源：

Webpack5 核心原理与应用实践

在 Webpack 4 中导入图像

原生 Webpack 4 只能处理标准 JavaScript 模块，因此需要借助 Loader —— 例如 file-loader、url-loader、raw-loader 等完成图像加载操作，实践中我们通常需要按资源类型选择适当加载器，简单介绍：

Webpack 配置及规则

参考来源：

Webpack5 核心原理与应用实践

配置方法

对象配置

在前面章节中，我们已经编写了许多 Webpack 配置示例，其大多数都以单文件导出单个配置对象方式实现，类似：

module.exports = {
  entry: './src/index.js',
  // 其它配置...
};