webpack 面试题

一、前端为什么要进行打包和构建

1.体积更小（Tree-Shaking、压缩、合并），加载更快

2.编译高级语言和语法（TS，ES6+，模块化，scss）

3.兼容性和错误检查（Polyfill、postcss、eslint)

4.统一、高效的开发环境

5.统一的构建流程和产出标准

6.集成公司构建规范（提测、上线等）

二、model chunk bundle 的区别

1.model - 各个源码文件，webpack中一切皆模块

2.chunk - 多模块合并成的，如 entry import() spitChunk

3.bundle - 最终输出的文件

三、loader和plugin的区别

1.loader - 模块转换器，如 less -> css

2.plugin - 扩展插件，如 HtmlWebpackPlugin

四、babel和webpack的区别

1.babel - JS新语法编译工具，不关心模块化

2.webpack - 打包构建工具，是多个loader plugin的集合

五、如何产出一个lib

1.参考webpack.dll.js

2.output.library

六、babel-polyfill和babel-runtime的区别

1.babel-polyfill会污染全局

2.babel-runtime不会污染全局

3.产出第三方lib要用balel-runtime

七、webpack实现懒加载

1.import（）

2.结合Vue React 异步组件

3.结合Vue-router React-router异步加载路由

八、为何Proxy不能被 polyfill ？

1.Class可以用function模拟

2.Promise可以用callback来模拟

3.但Proxy的功能用Object.defineProperty无法模拟

九、webpack优化构建速度（可用于生产环境）

1.优化babel-loader

2.IgnorePlugin

3.noParse

4.happyPack

5.ParallelUglifyPlugin

十、webpack优化构建速度（不可用于生产环境）

1.自动刷新

2.热更新

3.DllPugin

十一、webpack优化产出代码

1.小图片base64编码

2.bunble 加 hash

3.懒加载

4.提取公共代码

5.使用CDN加速

6.IgnorePlugin

7.使用production

8.Scope Hosting