Web前端面试题：说说你对webpack的看法

解析：webpack是一个模块打包工具，可以使用webpack管理你的模块依赖，并编译输出模块们所需要的静态文件。能很好的管理、打包web开发中所用到的HTML、js、css以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。

webpack两大特色：

code splitting（可以自动完成）

loader 可以处理各种类型的静态文件，并且支持串联操作 webpack是以commonJS的形式来书写脚本，但是AMD/CMD的支持也很全面，方便旧项目进行代码迁移

webpck具有require和browserify的功能，但仍有很多自己的新特性：

对 CommonJS、AMD、ES6的语法做了兼容

对JS、css、图片等资源文件都支持打包

串联式模块化加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对conffeescript、ES6的支持

有独立的配置文件webpck.config.js

可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间

支持sourceUrls和sourceMaps，易于调试

具有强大的plugin接口，大多是内部插件，使用起来比较灵活

webpack使用异步IO并具有多级缓存，在增亮编译上更加快

Web前端面试题：webpack3和webpack4区别

解析：1. mode

webpack增加了一个mode配置，只有两种值development | production。对不同的环境他会启用不同的配置。

2. CommonsChunkPlugin

CommonChunksPlugin已经从webpack4中移除。 可使用optimization.splitChunks进行模块划分（提取公用代码）。 但是需要注意一个问题，默认配置只会对异步请求的模块进行提取拆分，如果要对entry进行拆分 需要设置optimization.splitChunks.chunks = 'all'。

3. webpack4使用MiniCssExtractPlugin取代ExtractTextWebpackPlugin。

4. 代码分割。

使用动态import，而不是用system.import或者require.ensure

5. vue-loader。

使用vue-loader插件为.vue文件中的各部分使用相对应的loader，比如css-loader等

6. UglifyJsPlugin

现在也不需要使用这个plugin了，只需要使用optimization.minimize为true就行，production mode下面自动为true

optimization.minimizer可以配置你自己的压缩程序

Web前端面试题：简单说一下babel的原理

解析：babel的转译过程分为三个阶段：parsing、transforming、generating，以ES6代码转译为ES5代码为例，babel转译的具体过程如下：

1. ES6代码输入

2. babylon 进行解析得到 AST

3. plugin 用 babel-traverse 对 AST 树进行遍历转译,得到新的AST树 4. 用 babel-generator 通过 AST 树生成 ES5 代码

本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题，并且都给出了我在网上收集的答案。通过对本篇知识的整理以及经验的总结，希望能帮到更多的前端面试者。（如有错误或更好的答案，欢迎指正，水平有限，望各位不吝指教。