前端面试题-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构建中的不同阶段执行自定义操作。