webpack 常见面试题

男娘i 2022-12-11 02:27 99阅读 0赞

### webpack 常见面试题 ###

*   *  1. 不用vue脚手架能搭建vue/react项目吗？
     *  2. 使用webpack 如何实现 测试环境与生产环境的培训
     *  3. webpack 如何实现 跨域
     *  4. webpack 如何实现优化
     *  5. webpack 如何加载less/sass
     *  6. webpack / vue如何实现懒加载
     *  7. webpack plugin与loader的区别
     *  8. webpack 如何实现多入口打包
     *  9. 为什么使用babel ?

## 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 属性传递参数运行不同的命令传递不同的参数

1.  cross-evn 插件传递参数
2.  process.env.NODE\_ENV在配置文件和项目中获取
3.  在webpack配置文件里面通过参数 加载不同的配置文件
4.  项目中通过参数的配置不同于请求域名，环境

**cross-env NODE\_ENV=production webpack**

## 3. webpack 如何实现 跨域 ##

1.  开发环境的跨域
2.  通过配置devServer 的proxy 实现代理跨域

## 4. webpack 如何实现优化 ##

（前端优化有哪些手段）

1.  压缩
    
     *  压缩html(html-webpack-plugin)
     *  压缩和优化css (optimize-css-assets-webpack-plugin)
     *  压缩js (uglifyjsWebpackPlugin)
2.  懒加载/延时加载/预加载
    
     *  import(xxx).then() -----延迟（按需加载）
    
    1.  魔法注释 prefetch 实现预加载
3.  分包  
    1. 通过import().then 导入自动分包  
    2. 通过import导入node\_modules的自动分包 chunks:“all”
4.  减少http请求  
    url-loader()  
    遇到小文件自动base64
5.  合理缓存  
    hash: 每打包一次都改变  
    contentHash: 内容发生改变就改变  
    chunkHash: 当前入口chunk方式改变而改变
6.  treeShake 摇钱树  
    不需要的组件自动删除
7.  按需加载  
    @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文件