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. 一个用于分析模块依赖、生成资源列表的块
   以一个模块为入口，生成一个chunk，分析模块的依赖关系之后，最后合并成一个bundle
   4. webpack中的bundle是指（ B ）
   A. 入口模块文件
   B. chunk打包合并后的资源文件
   C. 页面文件
   D. 图片文件
   
   5. 关于webpack配置说法正确的是（ A** ）
   A. 入口的配置使用entry
   B. 配置文件名必须是 webpack.config.js 我们可以更改之后，命令 webpack —config a.js
   C. 配置文件必须在工程根目录
   D. 配置文件中可以使用任何模块化导出语句 commonjs
   
   6. webpack的多入口，最确切的是指（ C ）
   A. 多个入口模块
   B. 多个bundle
   C. 多个chunk
   D. 多个asset
   entry:{ } 它里面配置的是chunk
   
   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 这俩一样

2. .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. 下面哪种代码会导致一个函数不再是纯函数（D ）函数的表达结果取决于参数
   A. 变量定义
   B. 循环
   C. 回调 回调不一定是异步
   D. ajax
   
   28. HMR的作用是（ A ）热替换
   A. 减少打包时间
   B. 减少页面响应时间 响应时间取决于js代码执行的速度，以及浏览器传输的量。
   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分）

3. webpack是基于_模块化的构建工具，它默认读取webpack.json.js文件作为配置文件。该配置文件需要使用CommonJS 模块化标准导出配置，配置内容既可以是一个对象，也可以是一个函数。

4. webpack通过plugin和loader来实现功能的扩展，于是造就了活跃的社区和丰富的生态。许多本来独立的第三方库，也陆续加入到webpack生态中。比如专门处理css工程化的postcss，以及专门解决JS兼容性的@**babel**/core，都可以集成到webpack。
5. 对于性能，webpack生态提供了丰富的优化点，特别是对于打包体积，通常我们使用工具_webpack-bundle-analyzer bundle analyzer****进行分析，然后找到原因，进行针对性能的优化。

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

1. 概念解释：module、chunk、bundle
module：模块，分割的代码单元，webpack中的模块可以是任何内容的文件，不仅限于JS
chunk：webpack内部构建模块的块，一个chunk中包含多个模块，这些模块是从入口模块通过依赖分析得来的
bundle：chunk构建好模块后会生成chunk的资源清单，清单中的每一项就是一个bundle，可以认为bundle就是最终生成的文件
【参考答案】
module：webpack将源码中所有文件视为module
chunk：chunk是webpack在打包期间，相对独立的打包通道。webpack会根据入口来创建对应的chunk，每个chunk可能对应一个或多个入口模块，webpack根据这些模块寻找依赖关系，然后依次解析，在chunk内部完成最终资源的生成。
bundle：chunk打包完整后端资源，通常指最终打包完成的JS文件
2. 阐述loader和plugin的原理
loader：loader本质上是一个函数，在解析的过程中被调用，它的作用是将某个源码字符串转换成另一个源码字符串返回
plugin：是一个带有apply方法的对象
【参考答案】
loader：本质上是一个函数，该函数的作用是对某个模块的代码进行转换，返回另一种代码。webpack在读取模块代码后，如果根据配置匹配到了某些loader，则会将该模块的代码依次交给loader转换，当loader完成了代码转换，再进一步解析代码、分析依赖
plugin：本质上是一个对象，通常通过构造函数创建。该对象中提供apply方法，方法接收一个参数，该参数是webpack的编译对象，通过这个编译对象，apply方法可以注册一些钩子函数，从而参与到webpack的打包周期，完成对打包行为的改变和控制。