前端面试题-webpack

1.webpack是什么?

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

主要功能:

  1. 模块化:可以将多个模块打包成一个或多个bundle,方便管理维护。
  2. 自动化:可以自动处理和编译JavaScript等文件,提高开发效率。
  3. 性能优化:可压缩、去除无用代码等,提高网页加载速度。
  4. 扩展性:可通过插件进行扩展,实现定制化需求。
2.webpack和vite的区别?
  1.  核心原理:webpack基于静态分析,对项目进行模块化构建,通过打包将多个模块打包成静态资源。vite基于ES Module,通过启动服务器实现动态按需编译,减少不必要的构建过程。

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

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

  4. 配置复杂度:webpack配置相对复杂,需要手动配置各种家装器和插件等。

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

3.如何配置 Webpack 的入口和输出?
module.exports = {  
  entry: './src/main.js',    //入口
  output: {    //出口
    path: path.resolve(__dirname, './dist'),  
    filename: 'bundle.js'  
  }  
};
4.如何提高webpack的构建速度? 

优化方案:

  1. 代码压缩:js/css/html代码进行压缩。

  2. 图片压缩

  3. tree shaking:摇树,消除死代码,依赖于ES Moudle的静态语法分析。

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

        3.1 usedExports,通过标记某些函数是否被使用,通过Terser来进行优化

module.exports = {
    ...
    optimization:{
        usedExports
    }
}

优化检测

  1. webpack-bundle-analyzer,可看出文件的大小和各自的依赖
  2. speed-measure-webpack-plugin,分析整个打包的耗时,获取每个loader和每个plugins构建所需要的时间
 5.Webpack 配置中用过哪些 Loader ?都有什么作用?
  1. file-loader:将文件输出到指定的文件夹。
  2. url-loader:和file-loader类似,但可以在文件很小的情况下以base64的方式将文件内容注入到代码中。
  3. image-loader:加载并压缩图片。
  4. babel-loader:将ES6转成ES5代码。
  5. css-loader:加载css文件,支持模块化、压缩、文件导入等。
  6. style-loader:将css注入到JavaScript中,通过DOM操作加载css。
  7. eslint-loader:通过eslint检查JavaScript代码。
  8. postcss-loader:自动添加CSS3部分属性的浏览器前缀
6.Webpack 配置中用过哪些 Plugin ?都有什么作用?
  1. html-webpack-plugin:自动生成HTML文件并注入生成的脚本和样式文件

  2. clean-webpack-plugin:打包前,自动清空打包目录

7.loader和plugin的区别?

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

你可能感兴趣的:(前端,webpack,node.js)