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

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() -----延迟（按需加载）
   2. 魔法注释 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文件