一、 单选题(每个选项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配置说法正确的是( C
    A. 入口的配置使用entry
    B. 配置文件名必须是 webpack.config.js
    C. 配置文件必须在工程根目录
    D. 配置文件中可以使用任何模块化导出语句

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

    7. 这种配置会导致(
    A** )

    1. entry: {
    2. a: ["./src/a.js", "./src/index.js"],
    3. }

    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

  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. 下面哪种代码会导致一个函数不再是纯函数( 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分)

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

  4. webpack通过pluginloader来实现功能的扩展,于是造就了活跃的社区和丰富的生态。许多本来独立的第三方库,也陆续加入到webpack生态中。比如专门处理css工程化的postcss,以及专门解决JS兼容性的@babel/core,都可以集成到webpack。
  5. 对于性能,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方法的对象