前端面试题-webpack

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部分属性的浏览器前缀