10.webpack 和 babel
2020-04-16 11:14:56 8 举报AI智能生成
登录查看完整内容
webpack babel 配置 面试题
作者其他创作
大纲/内容
前端框架及项目面试聚焦Vue/React/Webpack— 课程笔记
第10章 webpack 和 babel
10-1 webpack考点梳理
1. webpack已是前端打包构建的不二选择2. 每日必用，面试必考3. 成熟的工具，重点在于配置和使用，原理并不高优
webpack
1. 基本配置2. 高级配置3. 优化打包效率4. 优化产出代码5. 构建流程概述6. babel
讲解范围
10-2 webpack基本配置串讲（上）10-3 webpack基本配置串讲（下）
1. vue-cli create-react-app2. 常用上述脚手架，但是自己不会配置webpack3. 面试不会通过
面试状况
拆分
merge
拆分配置和merge
proxy，设置代理，可以跨域请求其他接口
启动本地服务devServer
testincludeexclude作用都要知道
需要配置.bebelrc
处理ES6
postcss-loader，是处理css浏览器兼容性的less-loadercss-loaderstyle-loader
transform: rotate(-45deg可以给这些样式加一些前缀
使用postcss-loader时，需要配置postcss.config.js
处理样式
开发环境中
生产环境中
处理图片
1. 拆分配置和merge2. 启动本地服务3. 处理ES6（babel-loader）4. 处理样式（postcss-loader，是处理css浏览器兼容性的、 less-loader、 css-loader style-loader）5. 处理图片（file-loader）6. （模块化）
outputcontentHash
基本配置
10-4 webpack如何配置多入口10-5 webpack如何抽离压缩css文件10-6 webpack如何抽离公共代码和第三方代码10-7 webpack如何实现异步加载JS
面试情况
1. entry2. output3. 针对每个入口都要生成一个.html文件
多入口配置
抽离css文件后，css样式是以外部链接文件的形式引入的
不抽离css时，css会放到<style>中
线上打包，必须抽离CSS文件
抽离CSS文件
两个文件引入了同一个模块，会打包两次
lodash文件较大每次修改业务代码时，lodash都要重新打包，但是lodash并没有改变根本不需要重新打包应该把lodash拆出去单独打包，当业务代码改变时，loadsh会命中缓存，加载会快
第三方模块
可以设置minSize来限制多大的第三方模块单独打包如果文件非常小，可以不抽离，直接和业务代码一起打包
minChunks: 2 // 公共模块最少复用过几次比如公共模块至少复用了2次，就把它抽离出来单独打包，比如math
chunks & 缓存分租
抽离公共代码和第三方代码
懒加载也会产生一个chunk
懒加载
@babel/preset-react
处理JSX
vue-loader
处理vue
1. 多入口配置2. 抽离css文件（考察重点）3. 抽离公共代码和第三方代码（考察重点）4. 懒加载（考察重点）5. 处理JS(@babel/preset-react)6. 处理vue(vue-loader)
webpack高级配置
10-8 module chunk bundle 的区别
1. module-各个源码文件，webpack中一切皆模块（能被引入的文件都是模块，不管是什么类型，比如css js 图片）2. chunk-多模块合并成的，如entry、import() 、splitChunk都可以生成chunk3. bundle-最终的输出文件
module chunk bundle的区别
10-9 webpack优化构建速度-知识点串讲 10-10 用IngorePlugin忽略无用文件10-11 happyPack是什么10-12 webpack如何配置热更新10-13 何时使用DllPlugin10-14 webpack优化构建速度-考点总结和复习
面试时，不要让面试官觉得你在背面试题
注意
1. 大厂必考 & 社区热议话题2. 优化打包构建速度-开发体验和效率3. 优化产出代码-产品性能
webpack性能优化
开启缓存: 用cacheDirectory，只要ES6代码没变，就不会重新编译，会缓存下来第二次编译时，没改的部分使用缓存
includeexclude
明确范围
优化babel-loader
1. JS单线程，开启多进程打包2. 提高构建速度（特别是多核CPU）
happyPack多进程打包
1. webpack内置Uglify工具压缩JS2. JS 单线程，开启多进程压缩更快3. 和happyPack同理
在开发环境下使用压缩
1. 项目较大，打包较慢，开启多进程能提高速度2. 项目较小，打包很快，开启多进程会降低速度（进程开销）3. 按需使用要理解不要背书，什么情况下使用什么情况下不适用
关于开启多进程
ParallelUglify多进程压缩JS
开发环境下使用，生产环境没有自动刷新在开发环境下配置devServer时，就默认开启自动刷新
自动刷新
1. 自动刷新：整个网页全部刷新，速度较慢2. 自动刷新：整个网页全部刷新，状态会丢失（比如填写表单时，网页刷新会导致表单内容丢失。 或者路由跳转了很多次，网页刷新后会跳转到首页）3. 热更新：新代码生效，网页不刷新，状态不丢失
热更新配置
网页刷新对开发体验影响很大时，开启热更新否则就用网页刷新
自己配置哪些模块需要热更新
热更新HotModuleReplacementPlugin
1. 前端框架如vue React，体积大，构建慢2. 较稳定，不常升级版本3. 同一个版本只构建一次即可，不用每次都重新构建
react.dll.js 是打包后的内容react.manifest.json是索引
DllPlugin-打包出dll文件
DllReferencePlugin-使用dll文件
1. webpack已内置DllPlugin支持2. DllPlugin-打包出dll文件3. DllReferencePlugin-使用dll文件
思路就是，先提前打包一次，再引用之前打包的文件
DllPlugin动态链接库插件
1. 优化babel-loader2. IgnorePlugin3. noParse4. happyPack5. ParallelUglify6. 自动刷新7. 热更新8. DllPlugin
webpack优化构建速度（可用于生产环境）
1. 自动刷新2. 热更新3. DllPlugin
webpack优化构建速度（不可用于生产环境！）
适用环境
优化构建速度
10-15 webpack优化产出代码-考点串讲10-16 什么是Tree-Shaking10-18 什么是Scope Hosting
1. 体积更小2. 合理分包，不重复加载3. 速度更快，内存使用更少
小图片base64编码
bundle 加 hash
提取公共代码
修改所有静态url的前缀（CDN前缀）
引用cdn地址
把打包的文件上传到CDN服务器上去
可以用于js css 图片
使用cdn加速
1. 自动开启代码压缩2. Vue React等会自动删掉调试代码（如开发环境的warning）3. 自动启动Tree-Shaking
production
什么是Tree-Shaking
js和css都可以treeShaking
ES6 Module才能让tree-shaking生效 commonjs不可以因为ES6 Module是静态引入，Commonjs是动态引入
两个文件，对应两个函数，一个函数产生一个作用域
文件越多，产生的函数越多，每个函数都有一个作用域，对js代码执行和内存消耗非常不友好
打包结果
代码体积越大，Scope Hosting效果越好
开启Scope Hosting
1. 代码体积更小2. 创建函数作用域更少3. 代码可读性更好
作用
怎么使用
多个函数合并成一个函数，作用域会减少
Scope Hosting
1. 小图片base64编码2. bundle 加 hash3. 懒加载 import 对大文件使用4. 提取公共代码5. IgnorePluging6. 使用CDN加速7. 使用production 自动压缩、 删掉调试代码 自动开启tree-Shaking8. Scope Hosting
webpack性能优化-产出代码
10-17 ES Module 和 Commonjs 的区别
1. ES6Module是静态引入，编译时引入 直接引入，打包时能直接识别到，不能在条件中判断是否引用2. Common动态引入，执行时引入3. 只有ES6 Module才能静态分析，实现Tree-Shaking
区别
10-19 babel基本概念串讲10-20 babel-polyfill是什么10-21 babel-polyfill如何按需引入10-22 babel-runtime是什么
1. 前端开发环境必备工具2. 同webpack，需要了解基本的配置和使用3. 面试考察概率不高，但要求必会
面试要求
1. 环境搭建2. .babelrc配置3. presets和plugins
环境搭建和基本配置
@babel/preset-env(转换es6 es7 es8语法)@babel/preset-flow@babel/preset-react (转换jsx语法)@babel/preset-typescript (转换ts语法)
选项
@babel/preset-env是一个babel插件的集合是一个预设置，代替我们写很多的plugins
npx babel src/index.js用babel把ES6语法编译成ES5语法
@babel/preset-env
presets
babel 是编译 es6 的核心工具。babel-loader 是借用了 babel ，封装了一下，将 babel 用于 webpack 的打包流程。这一点，很类似于 less 和 less-loader 。
babel和babel-loader的区别
babel
1. 什么是Polyfill（对一些浏览器不支持的函数做补丁或者兼容）2. core-js和regenerator core-js： 集成了一些新语法的补丁 https://github.com/zloirock/core-js 提供了es5、es6的polyfills，包括promises、symbols、collections、iterators、typed arrays、ECMAScript 7+ proposals、setImmediate 等等。 但是它不支持generator regenerator：支持generator3. babel-polyfill即两者的集合
babel-polyfill现已被弃用1. Babel7.4之后，弃用babel-polyfill|2. 推荐直接使用core-js和regenerator3. 但并不影响面试会考察它
babel-polyfill是什么？
配置
代码
转化结果，转了箭头函数，不处理API
代码演示
不用babel-polyfill时
转化结果
babel只负责解析语法，不处理API也不管模块化（webpack处理模块化）babel处理完交给webpackwebpack把babel-polyfill引入进来polyfill解析Promise和includes，API就可以在浏览器正常运行
babel-polyfill功能
使用babel-polyfill时
1. babel-polyfill文件较大2. 只使用其中一部分功能，无需全部引入
为什么按需引入
配置这个配置，满足babel7.4版本后babel-polly被弃用的配置
不需要import(@babel/polyfill)
按需引入的效果不会require(\"@babel/polyfill)\"只引入需要的core-js的语法特性
babel-polyfill如何按需引入
_promise _includes 不会污染全局环境使用方使用时没有副作用
效果
babel-polyfill的问题
babel-polyfill
10-23 webpack考点总结和复习
1. 拆分配置和merge 2. 启动本地服务 proxy代理3. 处理ES64. 处理样式5. 处理图片
1. 多入口2. 抽离CSS文件3. 抽离公共代码和第三方库4. 懒加载5. 处理JSX6. 处理vue
高级配置
1. 优化babel-loader2. IgnorePlugin3. noParse4. happyPack5. ParallelUglifyPlugin
可用于生产环境
不可用于生产环境
1. 小图片base64编码2. bundle 加 hash3. 懒加载 import 对大文件使用4. 提取公共代码5. IgnorePluging6. 使用CDN加速7. 使用production 自动压缩、 删掉调试代码 自动开启tree-Shaking8. Scope Hosting
优化产出代码
1. 环境搭建&基本配置2. babel-polyfill3. babel-runtime
10-24 webpack面试真题-前端代码为何要打包10-25 webpack面试真题-为何Proxy不能被Polyfill 10-26 webpack面试真题-常见性能优化方法
代码层面
1. 统一、高效的开发环境2. 统一的构建流程和产出标准3. 集成公司构建规范（提测、上线等）
打包流程、前端工程化方面
前端代码为何要打包
1. module-各个源码文件，webpack中一切皆模块2. chunk-多模块合成，如entry import() splitChunk3. bundle-最终产出的文件
1. loader模块转换器，如less->css2. plugin扩展插件，如HtmlWebpackPlugin
loader和plugin的区别
常见loader和plugin有哪些
1. babel-JS 新语法编译工具，不关心模块化2. webpack-打包构建工具，是多个loader plugin的集合
babel和webpack的区别
1. 参考wbpack.dll.js2. output.library
如何产出一个lib
1. babel-polyfill会污染全局2. babel-runtime不会污染全局3， 产出第三方lib要用babel-runtime
babel-polyfill和babel-runtime的区别
1. import（）2. 结合Vue React异步组件3. 结合Vue-router React-router异步加载路由
webpack如何使用懒加载
1. 如Class可以用function模拟2. 如Promise可以用callback来模拟3. 但Proxy的功能用Object.defineProperty无法模拟
为何Proxy不能被Polyfill ?
1. 优化babel-loader2. IgnorePlugin3.noParse4. happyPack5. ParellelUglifyPlugin
不能用于生产环境!
1. 小图片base64编码2. bundle 加hash3. 懒加载4. 提取公共代码5. 使用CDN加速6.ignorePlugin7. 使用production8. Scope Hosting
wbpack面试题
0 条评论
回复 删除
下一页
