webpack

1、你如何搭建webpack

1. 先是基本配置，拆分生产、测试和公用模块
2. vue和react的loader
3. 处理图片的file-loader,url-loader
4. 样式打包style-loader,css-loader,less,scss-loader
5. 使用babel和corejs、regenerator处理ES6、
6. 启动服务devServe和模块化处理

2、webpack有哪些高级特性?

1. 多入口HtmlWebpackPlugin，
2. 抽离和压缩css，postcss和MiniCssExtractPlugin.loader，
3. 抽离公共代码splitChunks、
4. 懒加载用箭头函数import文件.then
5. 处理react和vue，vue-loader和babel自带preset-react

3、webpack有哪些性能优化？

优化构建速度和优化产出代码 优化构建速度可以使用：

1. 优化babel-loader 开启缓存，明确范围、
2. IgnorePlugin忽略包内部分文件，比如moment的/locale目录，只要手动导入中文包即可
3. noParse忽略对完整的min包，比如已有react.min.js，不需要重复打包、
4. happyPack开启多进程打包，提高构建速度、
5. ParallelUgifyPlugin开启多进程压缩js、
6. 自动刷新watchOptions、热更新devServe、不能用于生产环境
7. DllPlugin动态链接库插件，vue和react体积大但是不常升级版本，一个版本构建一次就可

不能使用生产环境

1. 自动刷新
2. 热更新
3. DllPlugin

优化产出代码可以通过:

1. 使用生产环境pro命令，vue和react会自动去除警告，启动代码压缩，启动tree-shaking、
2. 小图片base64编码、
3. bundle和hash、
4. 使用CDN
5. 提取公共代码、
6. 懒加载配合动态组件、
7. scope hosting减少闭包
8. IgnorePlugin忽略包内部分文件

4、loader和plugin的区别

1. loader模块转换器，如less-》css
2. plugin扩展插件，如HtmlWebpackPlugin

5、你如何理解babel的？

将高级的es语法，转换成浏览器可识别的ES版本，他还自带了react-loader

6、为何需要进行打包构建

1. 体积更小，加载更快（Tree-Shaking、压缩、合并）
2. 编译高级语言和语法（TS、ES6以上版本、模块化、scss）
3. 兼容性和错误检查(Polyfill、postcss、eslint)
4. 统一、高校的开发环境
5. 统一的构建流程和产出标准
6. 集成公司构建规范(提交测试、上线等)

7、如何产出一个lib？

1. output:{filename path library
2. 尽量使用babel-runtime

8、webpack的module chunk bundle区别

1. module各个源码文件，webpack中一切皆模块
2. chunk-多模块合并而成的文件，splitchunk，import()等
3. bundle-最终的输出文件

9、为何proxy不能被polyfill？

1. 因为它是高级语法，无法用历史方法实现
2. class可以用funcion模拟
3. promise可以用callback来模拟

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

1. babel-polyfill会污染全局
2. babel-runtime不会污染全局,
3. 产出第三方lib要用babel-runtime

11、webpack如何实现懒加载

1. import()
2. 结合vue和react的异步组件
3. 结合vue-router和react-router异步加载路由