webpack常见面试题

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

   从代码角度：体积更小（tree-shaking，noParse，ignorePlugin，压缩，合并等），加载更快；可以使用高级语言或语法（TS，ES6+，模块化，scss）；兼容性和错误检查（Polyfill,postcss,eslint）；

   从开发流程角度：统一、高效的开发环境；统一的构建流程和产出标准；集成公司构建规范（提测，上线等）；

2. module，chunk，bundle的区别

   module即模块，webpack中一切皆模块；

   chunk是webpack打包构建过程中的产物；

   bundle是最终产出的文件，与chunk一对一；

3. loader和plugin的区别

   loader是模块转换器，识别css或者img等；plugin是扩展插件，对loader转换器转换之后的js做其他处理；

4. 常见loader和plugin

   babel-loader;style-loader;css-loader;postcss-loader;less-loader;file-loader;image-loader;html-loader等;

   HtmlWebpackPlugin;webpack.IgnorePlugin;mini-css-extract-plugin;terser-webpack-plugin;optimize-css-assets-webpack-plugin;HappyPack;ParallelUglifyPlugin;HotModuleReplacementPlugin;DllPlugin;webpack.optimize.ModuleConcatenationPlugin;

5. babel和webpack的区别

   babel是JS新语法编译工具，不关心模块化；

   webpack是打包构建工具，是多个loader plugin的集合，需要什么功能就配置什么loader或plugin；

6. 如何产出一个lib（第三方工具库）

   配置output的library，例如用webpack打包一个lodash.js工具库↓：

   output: {
   	filename: 'lodash.js',
   	path: distPath,
   	library: 'lodash'
   }
   

7. babel-polyfill和babel-runtime的区别

   Babel-polyfill会污染全局环境；babel-runtime是为了不污染全局的替代品；所以产出第三方lib的使用场景要用babel-runtime;

8. webpack如何实现懒加载

   import()；结合vue react异步组件；结合vue-router react-router异步加载路由；后两个是依赖import()实现的；

9. 为何Proxy不能被Polyfill

   首先哪些可以被polyfill，Class可以用function模拟，Promise可以用callback来模拟；但Proxy的功能没办法，用Object.defineProperty无法模拟；

10. webpack常见的优化手段

    优化构建速度：

    优化产出代码：

11. 描述webpack构建流程

    串行的

    初始化：读取及初始化参数和插件；

    编译构建：从入口module开始根据依赖递归地进行编译解析，使用各自模块对应的loader；

    输出：对编译后的module组合成chunk，把chunk转换成最终的bundle文件并输出；

12. 手写loader和plugin

    loader和plugin本质就是一个node模块，可以自己写然后使用路径加载对应的模块；

    plugin就是拦截webpack构建生命周期的钩子函数进行处理然后调用callback继续生命周期；

13. 图片优化

    图片压缩；使用CDN缓存；图片格式选择（如webp)；图片懒加载；