webpack基础知识单选题100道及答案

webpack基础知识单选题100道及答案1.以下关于webpack的说法，正确的是（）A.webpack只能用于打包JavaScript文件B.webpack是一个前端项目的自动化构建工具C.webpack主要用于后端项目的部署D.webpack只适用于React项目答案：B2.webpack的核心概念中，负责将不同类型的文件转换为有效的模块的是（）A.entryB.outputC.loaderD.plugin答案：C3.webpack中默认的入口文件是（）A.index.jsB.main.jsC.app.jsD.entry.js答案：A4.在webpack配置文件中，用于指定输出文件的路径和文件名的属性是（）A.entryB.outputC.moduleD.plugins答案：B5.以下哪个loader可以用于处理CSS文件（）A.babel-loaderB.css-loaderC.file-loaderD.url-loader答案：B6.webpack中用于处理图片等静态资源的loader可以是（）A.style-loaderB.sass-loaderC.file-loaderD.postcss-loader答案：C7.以下关于webpack插件（plugin）的说法，错误的是（）A.插件可以用于优化打包结果B.插件可以在打包过程中执行特定的任务C.插件和loader的功能基本相同D.插件可以用于生成额外的文件答案：C8.webpack的开发服务器（webpack-dev-server）的主要作用是（）A.用于打包项目B.提供一个本地的开发服务器，实现热更新等功能C.用于部署项目到生产环境D.用于优化项目的性能答案：B9.在webpack配置中，用于配置loader的属性是（）A.entryB.outputC.moduleD.plugins答案：C10.以下哪个插件可以用于提取CSS文件到单独的文件中（）A.HtmlWebpackPluginB.CleanWebpackPluginC.MiniCssExtractPluginD.UglifyJsPlugin答案：C11.webpack中，用于处理ES6+语法转换为ES5语法的loader是（）A.css-loaderB.babel-loaderC.file-loaderD.postcss-loader答案：B12.以下关于webpack的entry配置的说法，错误的是（）A.entry可以是一个字符串，指定单个入口文件B.entry可以是一个数组，指定多个入口文件C.entry可以是一个对象，用于配置多个入口点D.entry只能指定JavaScript文件答案：D13.webpack中，用于生成HTML文件并自动引入打包后的资源的插件是（）A.HtmlWebpackPluginB.CleanWebpackPluginC.MiniCssExtractPluginD.UglifyJsPlugin答案：A14.以下关于webpack的output配置中，用于指定输出文件名的属性是（）A.pathB.filenameC.publicPathD.chunkFilename答案：B15.以下哪个loader可以用于处理Sass文件（）A.css-loaderB.sass-loaderC.file-loaderD.postcss-loader答案：B16.webpack中，用于清理上次打包生成的文件的插件是（）A.HtmlWebpackPluginB.CleanWebpackPluginC.MiniCssExtractPluginD.UglifyJsPlugin答案：B17.在webpack配置中，用于配置插件的属性是（）A.entryB.outputC.moduleD.plugins答案：D18.以下关于webpack的模式（mode）的说法，错误的是（）A.有development、production和none三种模式B.development模式下会进行代码压缩和优化C.production模式下会进行代码压缩和优化D.none模式下不进行任何默认的优化答案：B19.webpack中，用于将多个CSS文件合并为一个文件的插件可以是（）A.HtmlWebpackPluginB.CleanWebpackPluginC.MiniCssExtractPluginD.OptimizeCssAssetsPlugin答案：D20.以下关于webpack的loader和plugin的区别，说法正确的是（）A.loader是在打包完成后执行，plugin是在打包过程中执行B.loader用于处理特定类型的文件，plugin用于执行更广泛的任务C.loader只能处理JavaScript文件，plugin可以处理各种类型的文件D.loader和plugin的作用完全相同答案：B21.webpack中，用于处理字体文件的loader可以是（）A.css-loaderB.file-loaderC.babel-loaderD.postcss-loader答案：B22.以下关于webpack的entry配置中，使用对象形式配置多个入口点时，对象的键表示（）A.入口文件的路径B.输出文件的名称C.入口点的名称D.输出文件的路径答案：C23.webpack中，用于优化JavaScript代码的插件可以是（）A.HtmlWebpackPluginB.CleanWebpackPluginC.UglifyJsPluginD.MiniCssExtractPlugin答案：C24.以下关于webpack的output配置中，publicPath属性的作用是（）A.指定输出文件的路径B.指定输出文件名C.指定在浏览器中访问打包文件的公共路径D.指定代码分割时生成的chunk文件的文件名答案：C25.以下哪个loader可以用于处理Less文件（）A.css-loaderB.less-loaderC.file-loaderD.postcss-loader答案：B26.webpack中，用于分析打包后文件大小和依赖关系的插件可以是（）A.webpack-bundle-analyzerB.CleanWebpackPluginC.MiniCssExtractPluginD.UglifyJsPlugin答案：A27.在webpack配置中，用于配置模块解析规则的属性是（）A.entryB.outputC.resolveD.plugins答案：C28.以下关于webpack的热更新（HotModuleReplacement）的说法，错误的是（）A.可以在不刷新页面的情况下更新模块B.只适用于CSS文件的更新C.可以提高开发效率D.需要在开发服务器中进行配置答案：B29.webpack中，用于处理JSON文件的loader是（）A.json-loader（在webpack4+中不需要，默认支持）B.css-loaderC.file-loaderD.postcss-loader答案：A30.以下关于webpack的代码分割（CodeSplitting）的说法，正确的是（）A.只能将JavaScript代码进行分割B.可以减小初始加载的文件大小C.不需要进行任何配置，webpack会自动进行代码分割D.代码分割会降低项目的性能答案：B31.webpack中，用于处理图片文件并将小于一定大小的图片转换为base64格式的loader是（）A.file-loaderB.url-loaderC.css-loaderD.postcss-loader答案：B32.以下关于webpack的output配置中，chunkFilename属性的作用是（）A.指定输出文件的路径B.指定输出文件名C.指定在浏览器中访问打包文件的公共路径D.指定代码分割时生成的chunk文件的文件名答案：D33.以下哪个插件可以用于在打包时将一些不需要的代码从最终的打包文件中去除（）A.HtmlWebpackPluginB.CleanWebpackPluginC.TreeShaking（webpack4+中默认支持，不是插件形式严格意义上）D.MiniCssExtractPlugin答案：C34.在webpack配置中，用于配置外部依赖的属性是（）A.entryB.outputC.externalsD.plugins答案：C35.以下关于webpack的环境变量的说法，错误的是（）A.可以通过环境变量来区分不同的构建环境B.只能在webpack配置文件中使用环境变量C.可以在代码中使用环境变量D.可以通过命令行参数来设置环境变量答案：B36.webpack中，用于处理模板文件（如ejs、pug等）的loader可以是（）A.ejs-loader（针对ejs模板）等B.css-loaderC.file-loaderD.postcss-loader答案：A37.以下关于webpack的devtool配置的说法，正确的是（）A.用于配置开发服务器的相关参数B.用于配置代码的压缩和优化选项C.用于配置生成sourcemap的方式D.用于配置模块的解析规则答案：C38.webpack中，用于处理CSV文件的loader可以是（）A.csv-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A39.以下关于webpack的缓存（Caching）的说法，错误的是（）A.可以提高打包的速度B.缓存只对开发环境有效C.可以通过配置来实现缓存D.合理的缓存可以减少不必要的重新打包答案：B40.webpack中，用于处理XML文件的loader可以是（）A.xml-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A41.以下关于webpack的模块解析顺序的说法，正确的是（）A.先从node_modules目录中查找，再从当前目录查找B.先从当前目录查找，再从node_modules目录中查找C.只从node_modules目录中查找D.只从当前目录查找答案：B42.webpack中，用于处理YAML文件的loader可以是（）A.yaml-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A43.以下关于webpack的别名（alias）配置的说法，错误的是（）A.可以通过别名来简化模块的引入路径B.别名配置只能在webpack配置文件中设置C.别名配置可以提高模块查找的效率D.别名配置可以避免一些路径相关的问题答案：B44.webpack中，用于处理Markdown文件的loader可以是（）A.markdown-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A45.以下关于webpack的性能优化的说法，错误的是（）A.减少不必要的依赖可以提高打包速度B.代码分割可以减小初始加载的文件大小C.不使用任何插件和loader可以提高性能D.合理配置缓存可以提高打包速度答案：C46.webpack中，用于处理TypeScript文件的loader是（）A.ts-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A47.以下关于webpack的构建过程的说法，正确的是（）A.首先解析入口文件，然后递归解析依赖的模块B.先处理插件，再处理loaderC.构建过程只涉及到JavaScript文件的处理D.构建过程不需要进行文件的读取和写入操作答案：A48.webpack中，用于处理Vue单文件组件（.vue文件）的loader是（）A.vue-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A49.以下关于webpack的目标（target）配置的说法，错误的是（）A.用于指定构建的目标环境B.常见的目标环境有web、node等C.目标配置对打包结果没有影响D.不同的目标环境可能需要不同的配置答案：C50.webpack中，用于处理CoffeeScript文件的loader可以是（）A.coffee-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A51.以下关于webpack的依赖图（DependencyGraph）的说法，正确的是（）A.依赖图只包含JavaScript文件的依赖关系B.依赖图是在打包完成后生成的C.依赖图记录了项目中各个模块之间的依赖关系D.依赖图对项目的构建没有实际作用答案：C52.webpack中，用于处理Haml文件的loader可以是（）A.haml-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A53.以下关于webpack的错误处理和提示的说法，错误的是（）A.webpack会在控制台输出详细的错误信息B.可以通过配置来定制错误提示的格式和内容C.忽略错误可以提高打包的稳定性D.错误信息对排查问题没有帮助答案：D54.webpack中，用于处理Stylus文件的loader是（）A.stylus-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A55.以下关于webpack的模块热替换（HMR）和自动刷新（LiveReloading）的区别，说法正确的是（）A.HMR会刷新整个页面，LiveReloading只会更新修改的模块B.HMR只会更新修改的模块，LiveReloading会刷新整个页面C.HMR和LiveReloading的效果完全相同D.HMR和LiveReloading都不适合在开发环境中使用答案：B56.webpack中，用于处理Jade文件的loader可以是（）A.jade-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A57.以下关于webpack的配置文件（webpack.config.js）的说法，错误的是（）A.配置文件是一个JavaScript文件B.配置文件只能有一个C.可以通过命令行参数指定不同的配置文件D.配置文件中可以使用Node.js的模块和语法答案：B58.webpack中，用于处理Handlebars模板文件的loader可以是（）A.handlebars-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A59.在webpack中，若想对打包后的文件进行重命名以添加哈希值来防止缓存问题，应在output配置的哪个属性中设置相关规则（）A.pathB.filenameC.publicPathD.hashPath答案：B60.以下关于webpack-dev-middleware的说法，正确的是（）A.它是一个独立的服务器，与webpack-dev-server功能相同B.它是一个中间件，用于将webpack的编译结果提供给其他服务器C.它只能在生产环境中使用D.它主要用于优化打包后的文件大小答案：B61.webpack中，用于处理GraphQL文件的loader可以是（）A.graphql-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A62.当在webpack中配置多个loader处理同一类型文件时，loader的执行顺序是（）A.从左到右，从上到下B.从右到左，从上到下C.从左到右，从下到上D.从右到左，从下到上答案：D63.以下关于webpack的CodeSplitting中动态导入（DynamicImports）的说法，错误的是（）A.可以使用import()语法来实现动态导入B.动态导入会导致初始加载文件大小增加C.动态导入有助于实现按需加载D.动态导入可以提高应用的性能答案：B64.webpack中，用于优化字体文件加载的插件可以是（）A.HtmlWebpackPluginB.FontFaceObserverPluginC.MiniCssExtractPluginD.UglifyJsPlugin答案：B65.在webpack配置中，用于设置模块的默认导出方式的属性是（）A.exportsB.output.exportsC.module.exportsD.不存在这样的属性答案：D66.以下关于webpack的TreeShaking在CSS中的应用，说法正确的是（）A.webpack默认会对CSS进行TreeShakingB.可以通过配置PurgeCSS插件来实现CSS的TreeShakingC.CSS不存在TreeShaking的概念D.只有在生产模式下CSS才会进行TreeShaking答案：B67.webpack中，用于处理MDX文件（MarkdownwithJSX）的loader是（）A.mdx-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A68.以下关于webpack的性能预算（PerformanceBudget）的说法，错误的是（）A.可以设置打包文件的大小限制B.性能预算对开发过程没有实际意义C.当打包文件超出预算时，webpack会给出警告D.可以通过配置来调整性能预算答案：B69.webpack中，用于处理Scala.js文件的loader可以是（）A.scalajs-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A70.在webpack的resolve配置中，alias属性中设置的别名路径是否需要以斜杠（/）结尾（）A.一定需要B.一定不需要C.根据操作系统决定D.取决于具体的配置需求，有的情况需要，有的情况不需要答案：D71.以下关于webpack的HMR在React应用中的使用，说法错误的是（）A.可以实现React组件的局部更新B.需要在React组件中进行额外的配置才能使用HMRC.HMR可以提高React应用的开发效率D.React默认支持HMR，无需任何配置答案：D72.webpack中，用于处理LESS模块（带有模块化语法的LESS文件）的loader可以是（）A.less-loader?modulesB.css-loaderC.file-loaderD.postcss-loader答案：A73.以下关于webpack的缓存策略中，缓存失效的原因不包括（）A.配置文件发生变化B.依赖的模块发生变化C.缓存文件过期时间到了D.打包的目标环境改变答案：C74.webpack中，用于处理WebAssembly文件的loader可以是（）A.wasm-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A75.在webpack的配置中，若要为不同的环境（开发、生产等）设置不同的配置，最常用的方法是（）A.编写多个完全独立的webpack配置文件B.使用环境变量结合一个配置文件，通过条件判断来设置不同配置C.在每次打包时手动修改配置文件D.无法为不同环境设置不同配置答案：B76.以下关于webpack的ModuleFederation（模块联邦）的说法，错误的是（）A.可以实现跨应用共享代码和模块B.只能在同一项目的不同模块之间使用C.有助于构建微前端架构D.可以提高代码的复用性答案：B77.webpack中，用于处理Handlebars.runtime.js的相关配置通常在哪个loader中（）A.handlebars-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A78.以下关于webpack的AssetModules（资产模块）的说法，正确的是（）A.资产模块只能处理图片文件B.资产模块是webpack5新引入的功能，用于替代部分loaderC.资产模块不能进行自定义配置D.资产模块只能在生产模式下使用答案：B79.webpack中，用于处理Dart文件的loader可以是（）A.dart-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A80.在webpack的devServer配置中，hotOnly属性的作用是（）A.只在热更新失败时才刷新页面B.始终只进行热更新，不刷新页面C.只在开发环境中生效，生产环境中无效D.控制热更新的频率答案：A81.以下关于webpack的优化压缩图片的方法，除了使用image-webpack-loader外，还可以（）A.手动在Photoshop中压缩图片后再放入项目B.使用gzip压缩服务器端的图片文件C.在webpack配置中设置图片的最大尺寸D.调整图片的分辨率答案：B82.webpack中，用于处理Stylus模块（带有模块化语法的Stylus文件）的loader可以是（）A.stylus-loader?modulesB.css-loaderC.file-loaderD.postcss-loader答案：A83.以下关于webpack的devtool配置中，source-map和inline-source-map的区别是（）A.source-map生成单独的映射文件，inline-source-map将映射内容嵌入到打包文件中B.source-map只在开发环境有效，inline-source-map在开发和生产环境都有效C.source-map生成的映射文件更小，inline-source-map生成的映射文件更大D.source-map用于JavaScript文件，inline-source-map用于CSS文件答案：A84.webpack中，用于处理EJS模块（带有模块化语法的EJS文件）的loader可以是（）A.ejs-loader?modulesB.css-loaderC.file-loaderD.postcss-loader答案：A85.以下关于webpack的Chunk的说法，错误的是（）A.Chunk是webpack打包过程中生成的代码块B.每个入口文件对应一个ChunkC.代码分割会产生多个ChunkD.Chunk只能包含JavaScript代码答案：D86.webpack中，用于处理Pug模块（带有模块化语法的Pug文件）的loader可以是（）A.pug-loader?modulesB.css-loaderC.file-loaderD.postcss-loader答案：A87.在webpack的output配置中，若要将打包后的文件输出到多个目录，以下做法正确的是（）A.无法实现此功能B.使用数组形式设置path属性C.配置多个output对象D.在path属性中使用通配符答案：C88.以下关于webpack的WebpackBundleAnalyzer插件在分析结果中，饼图表示的是（）A.各个模块的依赖关系B.各个Chunk的大小占比C.打包过程中各个阶段的耗时D.不同类型文件的数量占比答案：B89.webpack中，用于处理F#文件的loader可以是（）A.fsharp-loaderB.css-loaderC.file-loaderD.postcss-loader答案：A90.以下关于webpack的构建缓存与浏览器缓存的关系，说法正确的是（）A.构建缓存与浏览器缓存没有任何关联B.构建缓存可以优化浏览器缓存的设置C.浏览器缓存会影响构建缓存的效果D.构建缓存的结果直接决定了浏览器缓存的内容答案：B91.webpack中，用于处理GraphQLSDL文件的loader可以是（）A.graphql-sdl-loaderB.css-loaderC.file-loa