前端面试题-webpack_vite和webpack区别面试-CSDN博客

本文链接：https://blog.csdn.net/weixin_57399180/article/details/135595416

1.webpack是什么？

模块打包工具，用于将前端资源，如JavaScript、css、图片等打包成可以在浏览器运行的静态资源。可以将多个模块打包成一个或多个bundle。

主要功能：

模块化：可以将多个模块打包成一个或多个bundle，方便管理维护。
自动化：可以自动处理和编译JavaScript等文件，提高开发效率。
性能优化：可压缩、去除无用代码等，提高网页加载速度。
扩展性：可通过插件进行扩展，实现定制化需求。

2.webpack和vite的区别？

核心原理：webpack基于静态分析，对项目进行模块化构建，通过打包将多个模块打包成静态资源。vite基于ES Module，通过启动服务器实现动态按需编译，减少不必要的构建过程。

性能：webpack打包速度较慢，因为需要遍历和解析所有的依赖关系。vite通过动态按需编译和缓存机制，提高了打包速度。

适用场景：webpack适用各类前端项目，尤其是对模块化和代码结构要求高的项目。vite适合快速开发迭代和实时构建的项目，如单页应用程序、博客网站。

配置复杂度：webpack配置相对复杂，需要手动配置各种家装器和插件等。

热更新机制：webpack的热更新需要整个模块链重新打包和替换。vite只针对改动的模块进行更新，提高更新速度。

3.如何配置 Webpack 的入口和输出？

module.exports = {  
  entry: './src/main.js',    //入口
  output: {    //出口
    path: path.resolve(__dirname, './dist'),  
    filename: 'bundle.js'  
  }  
};

4.如何提高webpack的构建速度？

优化方案：

代码压缩：js/css/html代码进行压缩。

图片压缩

tree shaking：摇树，消除死代码，依赖于ES Moudle的静态语法分析。

减少ES6转ES5的冗余代码，bable-plugin-transform-runtime。

3.1 usedExports，通过标记某些函数是否被使用，通过Terser来进行优化
module.exports = {
    ...
    optimization:{
        usedExports
    }
}
优化检测

webpack-bundle-analyzer，可看出文件的大小和各自的依赖
speed-measure-webpack-plugin,分析整个打包的耗时，获取每个loader和每个plugins构建所需要的时间

5.Webpack 配置中用过哪些 Loader ？都有什么作用？

file-loader：将文件输出到指定的文件夹。
url-loader：和file-loader类似，但可以在文件很小的情况下以base64的方式将文件内容注入到代码中。
image-loader：加载并压缩图片。
babel-loader：将ES6转成ES5代码。
css-loader：加载css文件，支持模块化、压缩、文件导入等。
style-loader：将css注入到JavaScript中，通过DOM操作加载css。
eslint-loader：通过eslint检查JavaScript代码。
postcss-loader:自动添加CSS3部分属性的浏览器前缀

6.Webpack 配置中用过哪些 Plugin ？都有什么作用？

html-webpack-plugin:自动生成HTML文件并注入生成的脚本和样式文件

clean-webpack-plugin:打包前，自动清空打包目录

7.loader和plugin的区别？

loader用于处理非JavaScript模块的文件的转换，将文件作为输入并转换为webpack可以处理的模块。plugin用于扩展webpack的功能，可以在webpack构建中的不同阶段执行自定义操作。

8.Mode有什么作用？配置项有哪些？

mode可以告诉webpack使用相应模式完成内置优化。
modules.exports = {
    mode:'none'|'development'|'production'
    //默认none
}
none：不使用默认优化。
development：将DefinePlugin中process.env.NODE_ENV的值设置为development，为模块和chunk启用有效的名。
production:将DefinePlugin中process.env.NODE_ENV的值设置为production，为模块和chunk启用确定性的混淆名称。

9.source-map是什么？怎么用？

设置source-map后，webpack打包可生bundle.js.map文件，代码报错后，在浏览器可查看原始代码，而不是压缩丑化的代码。

开启source-map：

配置webpack,devtool:'source-map'
bundle.js文件最后增加注释。 ‘//#sourceMappingUrl = common.bundle.js.map’。浏览器会自动解析注释。

10.bable的底层原理？

解析阶段，通过词法分析、语法分析，解析成AST抽象语法树。
转换阶段，将AST树进行遍历，使用plugin生成新的AST树。
生成阶段，生成新的代码。

pllyfill是什么？

用于在当前的运行环境中模拟不存在的原生API。比如String.includes()是ES6之后的，对于不支持ES6的浏览器，可以引入babel-polyfill，使其支持es6的API。

11.webpack配置网络代理，解决跨域问题？

//webpack.config.js
module.exports = {  
  //...  
  devServer: {  
    // 代理设置  
    proxy: {  
      '/api': { // 需要代理的请求前缀  
        target: 'http://localhost：8000', // 代理请求的目标地址  
        changeOrigin: true, // 如果目标地址是CORS跨域，需要设置为true  
        pathRewrite: {  
          '^/api': '' // 将所有/api开头的请求路径重写为空  
        }  
      }  
    }  
  }  
};

12.webpack性能优化？

1.打包后的结果优化：

代码分包：

多入口配置

动态导入（动态路由 import()）

prefetch(预获取，父chunk加载结束后开始加载)和preload（预加载，在父chunk加载时并行加载）

文件压缩，js、css、图片进行压缩。terser
//配置多入口
module.exports = {
    entry:{
        index:'./src/index.js',
        main:'./src/main.js'
    },
    output:{
        filename:'[name].bundle.js',
        path:resolveApp('./build')
    }
}
2.打包速度的优化