一名深漂程序员：我所整理和收集的前端面试题 webpack有关面试题

Posted 2022-12-03 我是真的不会前端

写在前面的话

虽然作为绝大多数，打包发布这些事接触的很少甚至接触不到，尤其是如果在外包公司。那基本上除了写业务逻辑，打包上线这些事跟咱没任何关系，但是。webpack，或者vite这些打包的工具是面试题经常问的，掌握并了解是非常好的加分项

一.如何做webpack构建优化，有哪些策略？

首先webpack官网有句话，不要为了牺牲很小的性能。牺牲应用程序的质量，在大多数情况下，优化代码质量比构建性能更重要

1.devtool：‘source-map’

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。
一些值适用于开发环境，一些适用于生产环境。对于开发者来说，通常希望更快速的源图，需要添加到捆绑中以增加身高为长，但适合生产环境，则希望创建更快速的源图，需要从中分离并独立存在。

2.mode选用production

文档中明确讲过，在生产模式中，代码执行效率提高

3.vendor的提取

公共代码的提取，也叫公共第三方包的提取。通过chunk但对于js的依赖拆分优化策略

4.配置loaders时，使用exclude或include来指定目录

通过使用 include 字段，仅将 loader 应用在实际需要将其转换的模块

5.resolve路径解析优化

（alias、extensions、modules）
alia是的使用优化…延展
减少 resolve.modules, resolve.extensions, resolve.mainFiles, resolve.descriptionFiles 中条目数量，因为他们会增加文件系统调用的次数。
说白了就是常用的后缀写前面，不常用的写后面

6.dll性能优化

对于更新很少的目录结构在开发环境中做优化（比如不敢动的祖传代码） 让这些代码缓存下来。减少构建时间，进行分离打包。使用dllPlugins

7. 减少编译结果的整体大小，提高构建性能

8.使用HappyPack开启多线程构建

多线程在大型项目中会一定程度上加速构建

exports.plugins = [
  new HappyPack(
    id: 'jsx',
    threads: 4,
    loaders: [ 'babel-loader' ]
  ),
  ]

9.node上require使用相对路径

require使用相对路径效率更快

10.chunk css

11.减少编译编译路径

12.增量缓存

有关讲解增量缓存不错的帖子

13. 生产环境中，可以使用tree shaking

14.使用压缩效率更高的TerserWebpackPlugin插件进行生产压缩

15.MiniCssExtractPlugin 抽离css

这个很多很多，面试想到多少说多少，大胆说

二、如何提升webpack的运行速度（开发环境），有哪些策略

1.ScopeHoisting作用域提升

2.使用热更新

3. Plugin尽可能少并确保可靠

选择性能比较好的、官方推荐的或者社区认可的插件来使用。
Plugin尽可能少的使用，减少冗余的代码分析。比如：（css代码压缩插件只在生产环境中配置，开发环境中没有必要使用）
开发环境无用插件的剔除。

4. 构建缓存

在开发环境中使用cache-loader.优先使用webpack的缓存资源
加在loader前。
或者对象语法lader：name：‘cache-loader’
在生产模式 cache：true
cach：type：memory

5 optimization.minimize 关闭压缩功能

三、如何自定义loaders、plugins

看我新写的文章

自定义loader和plugin

class myPlugin 
    constructor(options)       // 执行信息
        console.log(options);
    
    apply(compiler)
        compiler.hooks.emit.tapAsync("myPlugin",(compilation,callback)=>
            compilation.assets['content']=
                source:function()
                    return "content"
                ,
                size:function()
                    return content.length
                
            ;
            cb(
	console.log('this is a content')
);
        )
    

 
module.exports = myPlugin    //自定义一个配置并且引出
 
在webpack默认配置中 的 plugins放入
const myPlugin=require('./plugins/my-webpack-plugin');
 
    plugins:[
        new myPlugin()
    ],

四、说说HMR原理

HMR = Hot Module Replacement
原理：加上这个配置之后，当我们再启动本地服务时，就会在node服务器上开启一个websocket长连接。每当代码有变化时，通过WS长连接通信把变化的代码推送到客户端（浏览器）进行自动更新。

五、有哪些babel预设

Babel预设：用于编译JS语法版本（ES6、TS、JSX）
@babel/core 是Babel编译的核心代码（它不是预设）
@babel/preset-env 用于编译ES6代码
@babel/preset-typescript 用于编译TS代码
@babel/preset-react 用于编译JSX代码

六、webpack 的loader是怎么处理sass的

 当有多个loader配合工作时，使用use:[]数组语法
       注意：当使用多个loader时，有严格的顺序要求，数组中越往后的loader越先工作。
       test: /\\.css$/i, use: ['style-loader', 'css-loader'],

      sass-loader，只是用于加载.scss文件，交给sass编译器进行编译，得到css代码
       css-loader，用于加载上一步中编译得到的css文件。
       style-loader，用于把css代码注入到DOM树中去。

七、请简述一下babel的运行原理

当webpack运行遇到.js文件时，使用babel-loader加载这个.js文件，然后交给一系列的@babel/*编译器进行编译，进而得到能够兼容浏览器的ES5代码。
当这条规则起作用时，环境会读取根目录中的babal.config.js文件、加载配置好的Babel预设和插件。

八、 解决ESLint报错常用的五种方案

1、找到eslint的配置文件，修改eslint规则
2、使用eslint注释的方式，临时关闭对代码的检测
3、在webpack中找到eslint的插件或eslint-loader进行exclude
4、使用.eslintignore临时忽略对代码的检测
5、老老实实地把eslint错误的改好（建议的做法）

九、脚手架环境中@直接指定src目录是怎么实现的

在webpack中plugin插件对象中。resolve中的

alias ‘@’ : path.resolve(__dirname,’…/…/src’)

最后

我想说的是，面试中 往往这些回答的出彩反而能成为加分项，webpack可以研究的很深。虽然打包工具越来越简洁，越来越好用，但是还是会频繁出现在面试中。尤其是配置方法。所以大家在准备面试时 除了传统面试题的时候，不要忘了打包这一块