Webpack面试总结

1. Webpack的核心组成是什么？

• Loader是指处理文件资源，做一个转换，使得html可以解析的代码，比如css-loader，ts-loader，file-loader，eslint-loader，url-loader，babel-loader等等，html，css，js的执行阶段。
• Plugin是指扩增webpack本身的功能，在整个webpack运行周期都会执行，在运行的时候会针对每个plugin建立一个对象，常见的Webpack有HtmlWebpackPlugin处理html的构建，I18nWebpackPlugin处理国际化方案问题。webpack编译过程中会创造一个compiler的对象，是个代表webpack的全局对象，对象上具备各种webpack配置的属性；并且在单次打包过程中会创造一个compilation，具备单次打包有的属性。
• entry和output用于存放输入和输出的文件名
• optimization用于存放webpack的某些优化方案
• module和plugin用于存放loader和plugin的内容
• devtool的内容标记为"sourcemap"
• mode："development"或者"production"

2. Webpack打包原理是什么？

• cli脚手架进行预热，通过配置文件生成一个本次编译打包的配置对象compiler
• 注册plugins，plugins在整个webpack生命周期都会运行
• 通过入口文件索引所有的依赖项，根据引用文件的依赖关系建立一张map索引表格和AST树
• 加载Loader，针对索引表格处理文件资源的转换
• 索引表格记录了文件名的index索引号以及对应的引用项文件的index索引号
• 最后文件index，索引index以及文件内容被以对象的形式插入合成成一个dist文件

3. Webpack性能优化？

• 分包加载：可以把代码分别打包到多个文件里面，优点：

  • 针对多个打包入口的仓库，如果打包成多个dist文件：

    • 1. 可能共享文件会被重复打包，因此可以直接把共享文件抽离出来打包成一个外部文件；
    • 2. 可以将第三方代码和业务代码分开打包，这样每次业务代码更新，就可能不需要打包第三方代码的内容，而是直接使用缓存的版本；

• 可以使用devtool设定为"sourcemap"，会生成一个记录了打包后和打包前代码对应行数的文件，因为打包后代码通常会进行转译，比如ts会转译成js代码行数就会发生变化，对于一定BUG定位工具，可以用sourcemap去捕获对应的错误在实际代码中的定位

4. Webpack的打包类型有哪些？

• 根据内容进行分块打包，contentchunk
• 根据入口进行分块打包，chunkhash

5. Babel是什么？

用于把编译器无法识别的js语法转译为能识别，早期用于转移es6到es5，实际上babel的操作是

• 将编写的代码转为AST树的仿数组模式
• 将AST树的仿数组模式更改/转换传统的AST树
• 将AST再转为能够识别的js语法

6. js和css怎么压缩?

• 删除注释
• 去除空格
• 去除没有执行的多余的代码
• 把过于长的命名更改为短的
• 合并多个css选择器，以减少代码行数

7. webpack热更新是什么意思？

• 一种在程序执行过程中，不刷新正面页面，局部替换/删除/增加代码的技术

• 一般通过devServer开启，devServer是一种可以实时监控更新的对象/服务器/webserver，一般需要声明生成的打包文件地址，需要额外添加热更新插件，并且需要支持热更新的代码用module.hot.accept包裹，触发热更新之后就可以，就会选择性替换被热更新accept的代码

• 原理：

  • 客户端和服务端端建立一个websocket全双工通信
  • webpack的devserver会监听前端的代码更改，一旦更改代码，会生成本次更改的hash值和更改后的局部打包文件，并发送给客户端
  • 网页端会比较之前的打包hash和本次打包hash值，如果不一致，就会重新拉取资源，然后使用局部替换掉对应的代码