常见webpack面试真题

1、前端为何要进行打包和构建？

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

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

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

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

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

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

2、module chunk bundle 的区别 

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

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

     3.bundle - 最终输出的文件

3、loader和plugin的区别

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

     2.plugin - 扩展插件，如 HtmlWebpackPlugin

4、常见的loader和plugin有哪些？

   loader：

1. file-loader：把文件输出到一个文件夹中，在代码中通过相对URL引用输入的文件。
2. url-loader：和file类似，但能在文件很小的情况下以base64方式把文件内容注入到代码中。
3. image-loader：加载并压缩图片文件。
4. babel-loader：把ES6转换为ES5。
5. css-loader：加载CSS，支持模块化、压缩、文件导入等特性。
6. style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS。
7. eslint-loader：通过ESlint检查JavaScript代码。

   plugin:

1. define-plugin：定义环境变量。
2. commons-chunk-plugin：提取公共代码。
3. uglifyjs-webpack-plugin：缩小（压缩优化）js文

5、Babel和webpack的区别 

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

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

6、webpack如何产出一个lib库 

     1.参考webpack.dll.js

     2.output.library

7、说一下Babel-polyfill和babel-runtime的区别 

     1.babel-polyfill会污染全局

     2.babel-runtime不会污染全局

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

8、webpack如何实现懒加载？

     1.import（）

     2.结合Vue React 异步组件

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

9、为何Proxy不能被Polyfill？ 

     1.Class可以用function模拟

     2.Promise可以用callback来模拟

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

10、webpack如何优化构建速度？ 

   可用于成产环境

     1.优化babel-loader

     2.IgnorePlugin

     3.noParse

     4.happyPack

     5.ParallelUglifyPlugin

   不可用于成产环境

     1.自动刷新

     2.热更新

     3.DllPugin

11、webpack如何优化产出代码？ 

     1.小图片base64编码

     2.bunble 加 hash

     3.懒加载

     4.提取公共代码

     5.使用CDN加速

     6.IgnorePlugin

     7.使用production

     8.Scope Hosting