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文章来源:https://www.toymoban.com/news/detail-798623.html
//配置多入口 module.exports = { entry:{ index:'./src/index.js', main:'./src/main.js' }, output:{ filename:'[name].bundle.js', path:resolveApp('./build') } }
2.打包速度的优化文章来源地址https://www.toymoban.com/news/detail-798623.html
到了这里,关于前端面试题-webpack的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!