webpack试题试做

一、单选题（每个选项2分，共30题，60分）
二、填空题（共10空，每空2分，共20分）
三、简答题（共2题，每题10分，共20分）

一、单选题（每个选项2分，共30题，60分）

入口模块的代码： var obj; obj.sayHello() ，webpack在打包的过程中会（D）
A. 报错，打包失败
B. 报错，打包成功
C. 不报错，打包失败
D. 不报错，打包成功

2. webpack中的模块是指（ C** ）
A. 仅后缀名为JS的文件
B. 后缀名无所谓，但必须是JS代码
C. 任何被入口直接或间接依赖的文件
D. 打包合并之后的文件

3. webpack中的chunk是指（ D ）
A. 入口模块文件
B. 最终生成的文件
C. 即将生成的资源列表 assets
D. 一个用于分析模块依赖、生成资源列表的块

4. webpack中的bundle是指（ B ）
A. 入口模块文件
B. chunk打包合并后的资源文件
C. 页面文件
D. 图片文件

5. 关于webpack配置说法正确的是（ C ）
A. 入口的配置使用entry
B. 配置文件名必须是 webpack.config.js
C. 配置文件必须在工程根目录
D. 配置文件中可以使用任何模块化导出语句

6. webpack的多入口，最确切的是指（ C ）
A. 多个入口模块
B. 多个bundle
C. 多个chunk
D. 多个asset

7. 这种配置会导致（ A** ）
```
entry: {
 a: ["./src/a.js", "./src/index.js"],
}
```
A. 生成两个bundle
B. 多个chunk
C. bundle代码中一开始要运行两个模块的代码
D. 两个入口模块的运行顺序是从右到左的

8. 假如我们利用webpack，使用java语言的语法来编写前端代码，你认为是否可行（ D ）
A. 不可行，因为webpack不支持java代码
B. 不可行，因为java文件的后缀是.java，webpack仅支持.js文件后缀
C. 可行，因为我们可以利用plugin来执行java代码
D. 可行，因为我们可以利用loader来转换java代码

9. webpack的扩展点是（ C ）
A. loader
B. plugin
C. 以上两者
D. 没有扩展点

10. plugin是利用webpack的（ ** D ），来参与到webpack的编译流程的
A. hooks
B. chunk
C. bundle
D. compiler

11. 清除输出目录使用的是（ b ）
A. html-webpack-plugin
B. clean-webpack-plugin
C. file-loader
D. webpack-dev-server

12. 生成html文件使用的是（ A ）
A. html-webpack-plugin
B. clean-webpack-plugin
C. file-loader
D. webpack-dev-server

13. 复制静态资源使用的是（ C ）
A. file-loader
B. url-loader
C. copy-webpack-plugin
D. webpack-dev-server

14. 设置网络请求代理使用的是（ D ）
A. file-loader
B. url-loader
C. copy-webpack-plugin
D. webpack-dev-server

15. 在JS中导入普通文件，得到文件路径，同时把文件输出到输出目录的是（ A ）
A. file-loader
B. url-loader
C. copy-webpack-plugin
D. webpack-dev-server

16. BEM解决的问题是（ A ）
A. 类名重复的问题
B. 样式值重复的问题
C. css文件细分的问题
D. 以上都可以解决

17. style-loader的作用是（ A ）
A. 将样式加入到元素的style属性中
B. 将样式加入到页面的style元素中
C. 将样式分离到一个css文件
D. 将未来的css代码进行转换

18. 下面哪个库可以让我们使用未来的css代码（ B ）
A. less
B. postcss
C. postcss-preset-env
D. stylelint

19. css modules解决的问题是（ A ）
A. 类名重复的问题
B. 样式值重复的问题
C. css文件细分的问题
D. 以上都可以解决

20. 下面的哪种方案组合是不合理的（ B** ）
A. less + css modules
B. less + BEM
C. BEM + postcss
D. BEM + css in js
.browserlistrc文件中的作用是（ D ）
A. 转换JS代码
B. 转换CSS代码
C. 会被babel读取
D. 匹配浏览器范围

22. babel预设和插件的执行顺序是（ A ）
A. 先执行插件，再执行预设
B. 预设从前到后执行
C. 插件从后到前执行
D. 先执行预设，再执行插件

23. @babel/preset-env对于Promise的处理方式是（ C ）
A. 转换为其他格式的代码
B. 提供Promise的实现
C. 本身不作任何处理，最多导入一个core-js库来模拟Promise API
D. 以上均不正确

24. @babel/preset-env对于async和await的处理方式是（ B ）
A. 不做任何处理
B. 依托于regenratorRuntime库提供的api，对async和await语法进行转换
C. 不需要依托任何其他api，即可让转换后的代码执行
D. 以上均不正确

25. 下面哪种技术是用于对构建性能进行优化的（ C ）
A. bundle analyzer
B. gzip
C. cache-loader : 在一些性能开销较大的 loader 之前添加此 loader，以将结果缓存到磁盘里。
D. tree shaking

26. 下面哪种技术是用于对传输性能进行优化的（ C ）
A. ESLint
B. noParse
C. DllPlugin : DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。
D. thread-loader

27. 下面哪种代码会导致一个函数不再是纯函数（ A ）
A. 变量定义
B. 循环
C. 回调
D. ajax

28. HMR的作用是（ A ）
A. 减少打包时间
B. 减少页面响应时间
C. 减少JS的执行时间
D. 减少打包体积

29. splitChunk的作用不包含（ B ）
A. 提取公共代码
B. 降低打包体积
C. 减少传输量
D. 提升构建性能

30. 如果通过bundle analyzer分析，得知某个包的体积过大，下面哪种方案不需要考虑（ D ）
A. splitChunk
B. DllPlugin
C. Tree Shaking
D. HMR

二、填空题（共10空，每空2分，共20分）
webpack是基于_nodejs的构建工具，它默认读取webpack.json.js文件作为配置文件。该配置文件需要使用module.exports 模块化标准导出配置，配置内容既可以是一个对象，也可以是一个回调函数。
webpack通过plugin和loader来实现功能的扩展，于是造就了活跃的社区和丰富的生态。许多本来独立的第三方库，也陆续加入到webpack生态中。比如专门处理css工程化的postcss，以及专门解决JS兼容性的@babel/core，都可以集成到webpack。
对于性能，webpack生态提供了丰富的优化点，特别是对于打包体积，通常我们使用工具_**webpack-bundle-analyzer**进行分析，然后找到原因，进行针对性能的优化。

三、简答题（共2题，每题10分，共20分）

1. 概念解释：module、chunk、bundle
module：模块，分割的代码单元，webpack中的模块可以是任何内容的文件，不仅限于JS
chunk：webpack内部构建模块的块，一个chunk中包含多个模块，这些模块是从入口模块通过依赖分析得来的
bundle：chunk构建好模块后会生成chunk的资源清单，清单中的每一项就是一个bundle，可以认为bundle就是最终生成的文件
2. 阐述loader和plugin的原理
loader：loader本质上是一个函数，在解析的过程中被调用，它的作用是将某个源码字符串转换成另一个源码字符串返回
plugin：是一个带有apply方法的对象

一、 单选题（每个选项2分，共30题，60分）

二、填空题（共10空，每空2分，共20分）

三、简答题（共2题，每题10分，共20分）

一、单选题（每个选项2分，共30题，60分）