前端面试题之webpack相关问题
一、webpack是什么？
webpack 是一款模块打包工具。它通过“万物皆模块”这种设计思想，巧妙地实现了整个前端项目的模块化。在 Webpack 的理念中，前端项目中的任何资源都可以作为一个模块，任何模块都可以经过 Loader 机制的处理，最终再被打包到一起。
概念：webpack是把项目当做一个整体，通过给定的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理他们，最后打包成一个或多个浏览器可以识别的js文件
二、有没有做过那些相关配置
-
配置入口文件（可以是多个）
-
输入配置，包括文件名地址等（注意：即使入口文件有多个，但是只有一个输出配置）
-
配置各种的loader，实现对不同格式的文件的处理。比如说：
- 将scss转换成css
- typescript文件转换成js文件
了解常用的一些loader:
- babel-loader： 让下一代的js文件转换成现代浏览器能够支持的JS文件。 babel有些复杂，所以大多数都会新建一个.babelrc进行配置
- css-loader,style-loader:两个建议配合使用，用来解析css文件，如果需要解析less就在后面加一个less-loader
- file-loader: 生成的文件名就是文件内容的MD5哈希值并会保留所引用资源的原始扩展名
- url-loader: 功能类似 file-loader,但是文件大小低于指定的限制时，可以返回一个DataURL
-
配置各种插件（注意与loader的区别）比如：
- 使用插件配置git提交规范
- 使用插件配置eslint项目校验规则
- 使用插件切换cdn模板
- 使用插件进行缓存（主要用于开发环境）
- 使用插件进行压缩(代码)，减小打包体积，优化性能
注意：plugins和loader很容易搞混，说都是外部引用有什么区别呢？ 事实上他们是两个完全不同的东西。这么说loaders负责的是处理源文件的如css、jsx，一次处理一个文件。而plugins并不是直接操作单个文件，
二、webpack的原理
webpack是把项目当做一个整体，通过给定的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理他们，最后打包成一个或多个浏览器可以识别的js文件
三、Loader的原理
通过使用不同的Loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理，比如说将scss转换为css，或者typescript转化为js。
四、你有用那些优化措施
- 使用插件对项目进行缓存，避免重复加载，浪费资源
- 使用插件进行代码压缩，减小打包体积，优化性能
- 切换html模板（一般CDN）
五、vue.config.js 常用的配置
- 设置代理（主要是跨域问题）
devServer: {
port: 8300, // 端口号
host: '0.0.0.0',
https: false, //
open: false, //配置自动启动浏览器
// 配置跨域处理,只有一个代理
proxy: {
'/project-info': {
target: 'http://**.**.**.**:8091/', //后台地址
ws: true,
changeOrigin: true,
pathRewrite: {
'^/project-info': ''
}
},
}
},
- 设置打包时输入 输出文件
- 配置css预加载语言 （scss,less）
-
切换cdn模板，
将一些常用的库 由安装模式切换到在线模式 ，一般情况下是将index.html与main.ts 进行切换到对应的cdn 版本(减小打包体积，优化访问速度；但是有风险，一旦cdn挂了系统访问便会有问题)
示例：index.html -> index.cdn.html main.ts -> main.cdn.ts
-
配置eslint自动格式化（一般是配置规则，使用loader 加载配置）
//eslint自动格式化
webpackConfig.module
.rule('eslint')
.use('eslint-loader')
.tap(options => {
options.fix = true
return options
})
- 去除项目中的 console.log （一般生产环境会去除console.log）
- 设置缓存（一般开发环境使用，避免重复加载资源浪费）
