webpack 面试题

Knowledge > 面试题
webpack, 面试题
2

webpack

说说如何借助webpack来优化打包速度 == 前端性能？

代码分隔（实现按需加载）、压缩代码（减少文件大小）、静态资源处理（file-loader和url-loader）、懒加载和按需加载

  1. 使用最新版的webpack，最新版的会规避一些隐性的问题
  2. 使用合适的模式，例如开发模式、生产模式
  3. 使用include和exclude配置项，只解析必要的文件
  4. 使用alias配置项，将长路径优化为段路径
  5. 使用多进程和多线程的方式打包
  6. 使用cache配置项，持久化缓存，避免重复打包

说说webpack中常见的loader？解决了什么问题？

babel-loader：将ES6/ES7/JSX装换为ES5语法，以便浏览器识别

css-loader：解析CSS文件，将css文件装换为模块以便JavaScript使用

style-loader：用于将CSS样式注入DOM中

file-loader：用于图片、静态文件，转换为URL

url-loader：将文件转换为base64格式

sass-loader：用于将sass/scss装换为CSS

less-loader：用于将LESS装换为CSS

说说webpack中代码分割如何实现？

使用 **entry 配置，根据入口**进行代码拆分。

配置 **splitChunks 插件，根据不同的策略、依据模块之间的关系将公共部分抽离成单一文件**，如 vendor 外部依赖、公共代码等。

在开发中可以根据实际需求选择不同的方案，以达到更高的性能和优化效果。同时，为了避免缓存问题，可以在打包时加上输出文件的 chunk hash 值。

说说你对webpack的理解？plugin和loader有什么区别？

Webpack是一个现代化的前端构建工具，它主要用于将多个模块打包成最终的静态资源文件，如JavaScript、CSS和图片等。Webpack提供了强大的模块化处理能力和丰富的插件系统，使得前端开发更加高效和灵活。

以下是对Webpack的几个关键概念的解释：

  1. Entry（入口）：Webpack从指定的入口文件开始构建应用程序的依赖图。通常情况下，一个入口文件对应着一个或多个模块。
  2. Output（输出）：Webpack将所有的依赖模块打包成一个或多个输出文件，用于部署到生产环境。可以指定输出文件的名称、路径和格式。
  3. Loader（加载器）：Loader负责将非JavaScript模块转换为Webpack可识别的模块。它可以处理各种类型的文件，例如将CSS转换为JavaScript模块，或者在构建过程中对图片进行压缩和优化。
  4. Plugin（插件）：Plugin是Webpack的核心功能扩展机制，用于执行各种自定义任务和优化。插件可以完成一系列的构建任务，例如代码压缩、文件拷贝、环境变量注入等。与Loader不同，插件作用于整个构建过程而不仅仅针对单个模块。

Loader是处理模块级别的转换工具，Plugin是扩展Webpack功能的工具，用于执行整个构建过程中的任务和优化。在Webpack配置中，Loader通过module.rules配置，而Plugin通过plugins配置。两者合作使用可以实现更高效、灵活的前端构建流程。

说说webpack中常见的Plugin？解决了什么问题？

  1. HtmlWebpackPlugin：用于生成HTML文件，并自动注入打包后的资源（如CSS、JS）到HTML中。
  2. MiniCssExtractPlugin：将CSS从打包的JS文件中提取出来，生成独立的CSS文件，可以实现样式的异步加载和缓存优化。
  3. DefinePlugin：在打包过程中，替换代码中的全局常量，比如定义环境变量等。
  4. ProvidePlugin：自动加载模块，通过全局变量的方式，在每个模块中都不需要显式地引入。
  5. CopyWebpackPlugin：将指定的文件或文件夹复制到构建目录中，常用于拷贝静态资源文件。
  6. CleanWebpackPlugin：在每次构建前，清理指定的输出文件夹，确保每次构建前都是一个干净的状态。
  7. HotModuleReplacementPlugin：启用热模块替换（HMR），在开发过程中无需刷新整个页面，即可实时预览修改。
  8. ExtractTextWebpackPlugin：将CSS代码从JS文件中提取出来，并以独立的CSS文件进行引用，适用于Webpack 3及以下版本。
  9. UglifyJsPlugin：对JS代码进行压缩和混淆，减小文件体积，加快加载速度。
  10. BundleAnalyzerPlugin：可视化分析项目中各个模块的大小和依赖关系，帮助优化项目结构和性能。

SourceMap

在我们使用webpack打包之后，如果在浏览器中运行，报错的位置会****提示打包之后的js文件

  • sourceMap的作用
    通过在 webpack.config.js中配置 devtool:'cheap-module-source-map' || 'source-map'不同的环境中配置在开发环境配置第一个，生产环境配置第二个。
    配置完之后，在运行webpack之后在浏览器中运行，会在控制台显示打包之前报错代码的位置。
    它会在我们的项目中新建 XXX.map的文件，这个文件将打包之前和之后的模块相互关联。