webpack一面基础面试题

前端为何要进行打包和构建?

代码层面

1. 体积更小 (Tree-shaking, 压缩, 合并) , 加载更快
2. 编译高级语言或语法 (ES6+, 模块化, TS, scss)
3. 兼容性和错误检查 (Polyfill, postcss, eslint)

研发流程层面

1. 统一高效的开发环境
2. 统一的构建流程和产出标准
3. 集成公司构建规范(提测, 上线等)

---

module chunk bundle的区别?

1. module是各个源码文件, webpack中一切皆模块
2. chunk是多模块合并成的, 在内存中还未产出的代码块, 比如entry import() splitChunk里都可以定义chunk
3. bundle是最终产出的文件, 每个chunk打包完后都产出bundle文件

---

loader和plugin的区别?

loader模块转换器, 如less转换成css
plugin扩展插件, 如HtmlWebpackPlugin

---

babel和webpack的区别?

babel 是 js新语法编译工具, 不关心模块化
webpack是 打包构建工具, 是多个 loader plugin的集合

---

如何产出一个lib (第三方模块)?

output.library

---

babel-polyfill和babel-runtime的区别?

babel-polyfill会污染全局
babel-runtime不会
产出第三方lib要用babel-runtime

---

webpack如何实现懒加载?

import()
结合Vue 和 React 异步组件
结合Vue-router React-router异步加载路由

---

为何Proxy不能被polyfill?

可以被polyfill的:

class可以用 function 模拟
Promise可以用 callback 来模拟
但Proxy的功能用 Object.defineProperty 无法模拟

---

webpack优化构建速度 (可用于生产环境)?

优化babel-plugin
IngorePlugin
noParse
happypack
ParalleUglifyPlugin

---

webpack优化构建速度 (不用于生产环境)?

自动更新
热更新
DllPlugin

---

webpack优化产出代码?

小图片base64编码
bundle加hash
懒加载
提取公共代码
使用CDN
IgnorePlugin
使用production
Scope Hosting

---

Babel入门配置

Babel入门配置

---

Webpack入门配置

Webpack入门配置