Webpack考试题
一、 单选题（每个选项2分，共30题，60分）
1. 入口模块的代码： 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配置说法正确的是（ A ）
A. 入口的配置使用entry
B. 配置文件名必须是 webpack.config.js
C. 配置文件必须在工程根目录
D. 配置文件中可以使用任何模块化导出语句
6. webpack的多入口，最确切的是指（ C ）
A. 多个入口模块
B. 多个bundle
C. 多个chunk
D. 多个asset
7. 这种配置会导致（ C ）
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的（ A ），来参与到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的作用是（ B ）
A. 将样式加入到元素的style属性中
B. 将样式加入到页面的style元素中
C. 将样式分离到一个css文件
D. 将未来的css代码进行转换
18. 下面哪个库可以让我们使用未来的css代码（ C ）
A. less
B. postcss
C. postcss-preset-env
D. stylelint
19. css modules解决的问题是（ A ）
A. 类名重复的问题
B. 样式值重复的问题
C. css文件细分的问题
D. 以上都可以解决
20. 下面的哪种方案组合是不合理的（ D ）
A. less + css modules
B. less + BEM
C. BEM + postcss
D. BEM + css in js
21. .browserslistrc文件中的作用是（ 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的处理方式是（ AB ）
A. 不做任何处理
B. 依托于regenratorRuntime库提供的api，对async和await语法进行转换
C. 不需要依托任何其他api，即可让转换后的代码执行
D. 以上均不正确
25. 下面哪种技术是用于对构建性能进行优化的（ C ）
A. bundle analyzer
B. gzip
C. cache-loader
D. tree shaking
26. 下面哪种技术是用于对传输性能进行优化的（ C ）
A. ESLint
B. noParse
C. DllPlugin
D. thread-loader
27. 下面哪种代码会导致一个函数不再是纯函数（ D ）
A. 变量定义
B. 循环
C. 回调
D. ajax
28. HMR的作用是（ B ）
A. 减少打包时间
B. 减少页面响应时间
C. 减少JS的执行时间
D. 减少打包体积
29. splitChunk的作用不包含（ D ）
A. 提取公共代码
B. 降低打包体积
C. 减少传输量
D. 提升构建性能
30. 如果通过bundle analyzer分析，得知某个包的体积过大，下面哪种方案不需要考虑（ D ）
A. splitChunk
B. DllPlugin
C. Tree Shaking
D. HMR
二、填空题（共10空，每空2分，共20分）
- webpack是基于模块化____的构建工具，它默认读取webpack.config.js____文件作为配置文件。该配置文件需要使用__Commonjs__模块化标准导出配置，配置内容既可以是一个对象 或 object __，也可以是一个函数 或 function __。
- webpack通过loader和plugin__来实现功能的扩展，于是造就了活跃的社区和丰富的生态。许多本来独立的第三方库，也陆续加入到webpack生态中。比如专门处理css工程化的__postcss，以及专门解决JS兼容性的_babel___，都可以集成到webpack。
- 对于性能，webpack生态提供了丰富的优化点，特别是对于打包体积，通常我们使用工具__bundle analyzer___进行分析，然后找到原因，进行针对性的优化。
三、简答题（共2题，每题10分，共20分）
1. 概念解释：module、chunk、bundle
module：webpack将源码中所有文件视为module
chunk：chunk是webpack在打包期间，相对独立的打包通道。webpack会根据入口来创建对应的chunk，每个chunk可能对应一个或多个入口模块，webpack根据这些模块寻找依赖关系，然后依次解析，在chunk内部完成最终资源的生成。
bundle：chunk打包完整后端资源，通常指最终打包完成的JS文件
2. 阐述loader和plugin的原理
loader：本质上是一个函数，该函数的作用是对某个模块的代码进行转换，返回另一种代码。webpack在读取模块代码后，如果根据配置匹配到了某些loader，则会将该模块的代码依次交给loader转换，当loader完成了代码转换，再进一步解析代码、分析依赖
plugin：本质上是一个对象，通常通过构造函数创建。该对象中提供apply方法，方法接收一个参数，该参数是webpack的编译对象，通过这个编译对象，apply方法可以注册一些钩子函数，从而参与到webpack的打包周期，完成对打包行为的改变和控制。