Webpack 常用知识

please tell me

已于 2024-03-29 15:24:38 修改

阅读量349

点赞数

分类专栏： # 前端常见面试题文章标签： webpack javascript 前端

于 2023-02-08 20:45:22 首次发布

本文链接：https://blog.csdn.net/WXY19990803/article/details/128939220

版权

前端常见面试题专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、对打包工具和 Webpack 的理解

【】开发会使用框架（React、Vue），ES6 模块化，Less/Sass 等语法，这些代码在浏览器必须经过编译成浏览器能识别的Js、Css等语法，才能运行。打包工具可以完成这些事情，除此外还可以压缩代码、做兼容性处理、提高代码性能

【】Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去

2、5 大核心概念

【】entry 、output、 loader、 plugins、 mode

3、常用的 Loader 有哪些

【】默认情况下，Webpack只支持对js和json文件进行打包，但是像css、html、png等其他类型的文件，webpack则无能为力。因此，就需要配置相应的loader进行文件内容的解析转换

【】常用的 Loader 如下：

css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
less-loader：负责将 Less 文件编译成 Css 文件
sass-loader：负责将 Sass 文件编译成 Css 文件
babel-loader：将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器中
postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
vue-loader：加载并编译 Vue 组件
eslint-loader：通过 ESLint 检查 JavaScript 代码
image-loader：加载并且压缩图片文件

4、常用的 Plugin 有哪些

【】目的在于解决 loader 无法实现的其他事

【】常用的 Plugin 如下：

eslint-webpack-plugin：通过 ESLint 检查 JavaScript 代码
html-webpack-plugin：简化 HTML 文件创建
mini-css-extract-plugin：分离样式文件，CSS 提取为独立文件，支持按需加载
css-minimizer-webpack-plugin：对 CSS 文件进行压缩
image-minimizer-webpack-plugin: 用来压缩图片
clean-webpack-plugin：自动清空打包目录

5、Loader 和 Plugin 的区别

【】loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中

【】plugin功能更强大，loader不能做的都是它做。它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务

6、mode 模式配置

【】默认是 production，另外还有 development、none，区别如下：

选项	描述
development	开发模式，打包更加快速，省了代码优化步骤
production	生产模式，打包比较慢，会开启 tree-shaking 和压缩代码
none	不使用任何默认优化选项

7、区分环境

【】本地环境：需要更快的打包速度；需要打印debug信息；需要热更新；需要 sourcemap 定义问题

【】生产环境：需要更小的包体积，代码压缩+ tree-shaking ；需要进行代码分割；需要压缩图片体积

【】本地安装 cross-env，配置启动命令，可以在 webpack 配置文件中获取环境变量

//npm install cross-env -D

//配置启动命令
"scripts": {
    "dev": "cross-env NODE_ENV=dev webpack serve --mode development", 
    "test": "cross-env NODE_ENV=test webpack --mode production",
    "build": "cross-env NODE_ENV=prod webpack --mode production"
 }
 //获取环境变量
 console.log('process.env.NODE_ENV=', process.env.NODE_ENV) // 打印环境变量

8、source map是什么，怎么用

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

【】使用方式

//开发环境
module.exports = {
  // 其他省略
  mode: "development",
  devtool: "cheap-module-source-map",
};

//生产环境
module.exports = {
  // 其他省略
  mode: "production",
  devtool: "source-map",
};

9、三种 hash 值

【】基础配置中用到的：filename: "[name][hash:8][ext]"

【】hash、chunkhash、contenthash 区别

hash：任何一个文件改动，整个项目的构建 hash 值都会改变
chunkhash：文件的改动只会影响其所在 chunk 的 hash 值（根据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk，生成对应的哈希值）
contenthash：每个文件都有单独的 hash 值，文件的改动只会影响自身的 hash 值

【】目的：防止浏览器错误的使用未更新的缓存数据，项目无法更新

10、提升 webpack 打包构建速度

【】使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快

【】使用 OneOf 让资源文件一旦被某个 loader 处理了，就不会继续匹配其他 loader 了，打包速度更快

【】使用 Include/Exclude 排除或只检测某些文件，处理的文件更少，速度更快

【】使用 Cache 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快

【】使用 Thead 多进程处理 eslint 和 babel 任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）

【】减少代码体积

使用 Tree Shaking 剔除了没有使用的多余代码，让代码体积更小
使用 @babel/plugin-transform-runtime 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小
使用 Image Minimizer 对项目中图片进行压缩，体积更小，请求速度更快。（需要注意的是，如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。）