webpack 常见面试题
1. 不用vue脚手架能搭建vue/react项目吗?
能
1. css html js 正常流程
2. 用到ES6 采用 babel
3. vue.loader 加载.vue文件
4. vue-template-compiler 编译模板文件
5. vue-style-loader 加载 .vue的样式
6. .babel配置运行环境与插件
“presets”:["@babel/preset-env"]
2. 使用webpack 如何实现 测试环境与生产环境的培训
package.json
的script 属性传递参数运行不同的命令传递不同的参数
- cross-evn 插件传递参数
- process.env.NODE_ENV在配置文件和项目中获取
- 在webpack配置文件里面通过参数 加载不同的配置文件
- 项目中通过参数的配置不同于请求域名,环境
cross-env NODE_ENV=production webpack
3. webpack 如何实现 跨域
- 开发环境的跨域
- 通过配置devServer 的proxy 实现代理跨域
4. webpack 如何实现优化
(前端优化有哪些手段)
- 压缩
- 压缩html(html-webpack-plugin)
- 压缩和优化css (optimize-css-assets-webpack-plugin)
- 压缩js (uglifyjsWebpackPlugin)
- 懒加载/延时加载/预加载
- import(xxx).then() -----延迟(按需加载)
- 魔法注释 prefetch 实现预加载
- 分包
1. 通过import().then 导入自动分包
2. 通过import导入node_modules的自动分包 chunks:“all” - 减少http请求
url-loader()
遇到小文件自动base64 - 合理缓存
hash: 每打包一次都改变
contentHash: 内容发生改变就改变
chunkHash: 当前入口chunk方式改变而改变 - treeShake 摇钱树
不需要的组件自动删除 - 按需加载
@babel/pu\lugin-transform-runtime //按需加载
5. webpack 如何加载less/sass
- less 去编译less文件
- less-loader 加载less文件
- css-loader 加载编译好的css
- style-loader /minExtract.loader 放在header或者单独文件里面
6. webpack / vue如何实现懒加载
- 懒加载/延时加载/预加载
import(xxx).then() :延迟(按需加载)
魔法注释 prefetch 实现预加载 - 按需加载
@babel/pu\lugin-transform-runtime //按需加载
7. webpack plugin与loader的区别
- plugin
在webpack运行过程中(生命周期)额外处理其他内容的能力 - loader
让webpack拥有加载和处理非js文件
8. webpack 如何实现多入口打包
entry:{
"vue":"vue.js",
"react":"react.js"}
output:{
filename:“[name]-[hash].[ext]”}
new htmlWebpackPlugin({
chunks:["react"],//指定接收那个chunk的js文件
template:'./public/index.html',
filename: 'index.html' //指定输出文件名
})
9. 为什么使用babel ?
让ES6 ES7的js文件转换为Es5浏览器能被识别的js文件