10.webpack 和 babel 思维导图模板_ProcessOn思维导图、流程图

10-1 webpack考点梳理

webpack

1. webpack已是前端打包构建的不二选择
2. 每日必用，面试必考
3. 成熟的工具，重点在于配置和使用，原理并不高优

讲解范围

1. 基本配置
2. 高级配置
3. 优化打包效率
4. 优化产出代码
5. 构建流程概述
6. babel

10-2 webpack基本配置串讲（上）
10-3 webpack基本配置串讲（下）

面试状况

1. vue-cli create-react-app
2. 常用上述脚手架，但是自己不会配置webpack
3. 面试不会通过

基本配置

1. 拆分配置和merge
2. 启动本地服务
3. 处理ES6（babel-loader）
4. 处理样式
（postcss-loader，是处理css浏览器兼容性的、
less-loader、
css-loader
style-loader）
5. 处理图片（file-loader）
6. （模块化）

拆分配置和merge

拆分

merge

启动本地服务
devServer

proxy，设置代理，可以跨域请求其他接口

处理ES6

test
include
exclude
作用都要知道

需要配置.bebelrc

处理样式

postcss-loader，是处理css浏览器兼容性的
less-loader
css-loader
style-loader

使用postcss-loader时，需要配置postcss.config.js

transform: rotate(-45deg
可以给这些样式加一些前缀

处理图片

开发环境中

生产环境中

output
contentHash

10-4 webpack如何配置多入口
10-5 webpack如何抽离压缩css文件
10-6 webpack如何抽离公共代码和第三方代码
10-7 webpack如何实现异步加载JS

面试情况

1. 基本配置只能做demo,不能做线上项目
2. 面试考察基本配置，只是为了快速判断你是否用过webpack
3. 以下高级配置，也是通过面试的必要条件

webpack高级配置

1. 多入口配置
2. 抽离css文件（考察重点）
3. 抽离公共代码和第三方代码（考察重点）
4. 懒加载（考察重点）
5. 处理JS(@babel/preset-react)
6. 处理vue(vue-loader)

多入口配置

1. entry
2. output
3. 针对每个入口都要生成一个.html文件

chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
chunks: ['index', 'vendor', 'common'] // 要考虑代码分割

抽离CSS文件

抽离css文件后，css样式是以外部链接文件的形式引入的

不抽离css时，css会放到<style>中

线上打包，必须抽离CSS文件

抽离公共代码
和第三方代码

两个文件引入了同一个模块，会打包两次

第三方模块

lodash文件较大
每次修改业务代码时，lodash都要重新打包，但是lodash并没有改变根本不需要重新打包
应该把lodash拆出去单独打包，当业务代码改变时，loadsh会命中缓存，加载会快

chunks & 缓存分租

可以设置minSize来限制多大的第三方模块单独打包
如果文件非常小，可以不抽离，直接和业务代码一起打包

minChunks: 2 // 公共模块最少复用过几次
比如公共模块至少复用了2次，就把它抽离出来单独打包，比如math

懒加载

懒加载也会产生一个chunk

处理JSX

@babel/preset-react

处理vue

vue-loader

10-8 module chunk bundle 的区别

module chunk bundle的区别

1. module-各个源码文件，webpack中一切皆模块
（能被引入的文件都是模块，不管是什么类型，比如css js 图片）
2. chunk-多模块合并成的，如entry、import() 、splitChunk都可以生成chunk
3. bundle-最终的输出文件

10-9 webpack优化构建速度-知识点串讲
10-10 用IngorePlugin忽略无用文件
10-11 happyPack是什么
10-12 webpack如何配置热更新
10-13 何时使用DllPlugin
10-14 webpack优化构建速度-考点总结和复习

注意

面试时，不要让面试官觉得你在背面试题

webpack性能优化

1. 大厂必考 & 社区热议话题
2. 优化打包构建速度-开发体验和效率
3. 优化产出代码-产品性能

优化构建速度

1. 优化babel-loader
2. IgnorePlugin
3. noParse
4. happyPack
5. ParallelUglify
6. 自动刷新
7. 热更新
8. DllPlugin

优化babel-loader

开启缓存: 用cacheDirectory，只要ES6代码没变，就不会重新编译，会缓存下来
第二次编译时，没改的部分使用缓存

明确范围

include
exclude

happyPack多进程打包

1. JS单线程，开启多进程打包
2. 提高构建速度（特别是多核CPU）

ParallelUglify多进程压缩JS

1. webpack内置Uglify工具压缩JS
2. JS 单线程，开启多进程压缩更快
3. 和happyPack同理

在开发环境下使用压缩

关于开启多进程

1. 项目较大，打包较慢，开启多进程能提高速度
2. 项目较小，打包很快，开启多进程会降低速度（进程开销）
3. 按需使用

要理解不要背书，什么情况下使用什么情况下不适用

自动刷新

开发环境下使用，生产环境没有自动刷新

在开发环境下配置devServer时，就默认开启自动刷新

热更新
HotModuleReplacementPlugin

1. 自动刷新：整个网页全部刷新，速度较慢
2. 自动刷新：整个网页全部刷新，状态会丢失
（比如填写表单时，网页刷新会导致表单内容丢失。
或者路由跳转了很多次，网页刷新后会跳转到首页）
3. 热更新：新代码生效，网页不刷新，状态不丢失

热更新配置

自己配置哪些模块需要热更新

网页刷新对开发体验影响很大时，开启热更新
否则就用网页刷新

DllPlugin动态链接库插件

1. 前端框架如vue React，体积大，构建慢
2. 较稳定，不常升级版本
3. 同一个版本只构建一次即可，不用每次都重新构建

1. webpack已内置DllPlugin支持
2. DllPlugin-打包出dll文件
3. DllReferencePlugin-使用dll文件

DllPlugin-打包出dll文件

react.dll.js 是打包后的内容
react.manifest.json是索引

DllReferencePlugin-使用dll文件

思路就是，先提前打包一次，再引用之前打包的文件

适用环境

webpack优化构建速度
（可用于生产环境）

1. 优化babel-loader
缓存用于开发环境,生产环境基本不用
用 include exclude明确范围
2. IgnorePlugin
避免一些模块引入
不用的话，可能造成一些问题，比较打包后的体积大、打包慢
3. noParse
避免打包一些东西，提高生产环境打包的速度
4. happyPack
5. ParallelUglifyPlugin(必须用于生产环境，压缩代码)

webpack优化构建速度
（不可用于生产环境！）

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

10-15 webpack优化产出代码-考点串讲
10-16 什么是Tree-Shaking
10-18 什么是Scope Hosting

webpack性能优化-产出代码

1. 体积更小
2. 合理分包，不重复加载
3. 速度更快，内存使用更少

1. 小图片base64编码
2. bundle 加 hash
3. 懒加载
import
对大文件使用
4. 提取公共代码
5. IgnorePluging
6. 使用CDN加速
7. 使用production
自动压缩、
删掉调试代码
自动开启tree-Shaking
8. Scope Hosting

小图片base64编码

bundle 加 hash

提取公共代码

使用cdn加速

修改所有静态url的前缀（CDN前缀）

引用cdn地址

把打包的文件上传到CDN服务器上去

可以用于js css 图片

production

用mode: 'production',打包生产环境代码

1. 自动开启代码压缩
2. Vue React等会自动删掉调试代码（如开发环境的warning）
3. 自动启动Tree-Shaking

什么是Tree-Shaking

js和css都可以treeShaking

ES6 Module才能让tree-shaking生效
commonjs不可以
因为ES6 Module是静态引入，Commonjs是动态引入

Scope Hosting

打包结果

两个文件，对应两个函数，一个函数产生一个作用域

文件越多，产生的函数越多，每个函数都有一个作用域，对js代码执行和内存消耗非常不友好

开启Scope Hosting

代码体积越大，Scope Hosting效果越好

作用

1. 代码体积更小
2. 创建函数作用域更少
3. 代码可读性更好

怎么使用

多个函数合并成一个函数，作用域会减少

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是什么

babel

面试要求

1. 前端开发环境必备工具
2. 同webpack，需要了解基本的配置和使用
3. 面试考察概率不高，但要求必会

环境搭建和基本配置

1. 环境搭建
2. .babelrc配置
3. presets和plugins

presets

选项

@babel/preset-env(转换es6 es7 es8语法)
@babel/preset-flow
@babel/preset-react (转换jsx语法)
@babel/preset-typescript (转换ts语法)

@babel/preset-env

@babel/preset-env
是一个babel插件的集合
是一个预设置，代替我们写很多的plugins

npx babel src/index.js
用babel把ES6语法编译成ES5语法

const sum = (a, b) => a + b
的编译结果

babel和babel-loader的区别

babel 是编译 es6 的核心工具。
babel-loader 是借用了 babel ，封装了一下，将 babel 用于 webpack 的打包流程。
这一点，很类似于 less 和 less-loader 。

babel-polyfill

babel-polyfill是什么？

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：支持generator
3. babel-polyfill即两者的集合

babel-polyfill现已被弃用
1. Babel7.4之后，弃用babel-polyfill|
2. 推荐直接使用core-js和regenerator
3. 但并不影响面试会考察它

不用babel-polyfill时

代码演示

配置

代码

转化结果，转了箭头函数，不处理API

使用babel-polyfill时

代码演示

代码

转化结果

babel-polyfill功能

babel只负责解析语法，不处理API
也不管模块化（webpack处理模块化）

babel处理完交给webpack
webpack把babel-polyfill引入进来
polyfill解析Promise和includes，API就可以在浏览器正常运行

babel-polyfill如何按需引入

为什么按需引入

1. babel-polyfill文件较大
2. 只使用其中一部分功能，无需全部引入

代码演示

配置
这个配置，满足babel7.4版本后babel-polly被弃用的配置

不需要import(@babel/polyfill)

按需引入的效果
不会require("@babel/polyfill)"
只引入需要的core-js的语法特性

babel-polyfill的问题

1. 会污染全局环境
2. 如果做一个独立的web系统，则无碍
3. 如果做一个第三方lib, 则会有问题

如果定义window.Promise和Array.prototype.includes，可能会和使用方冲突
（比如使用方就想把window.Promise赋值‘abc’）
可以给它重新命名来解决, 不要污染全局环境

配置

效果

_promise _includes 不会污染全局环境
使用方使用时没有副作用

10-23 webpack考点总结和复习

1. 基本配置
2. 高级配置
3. 优化打包效率
4. 优化产出代码
5. 构建流程概述
6. babel

基本配置

1. 拆分配置和merge
2. 启动本地服务 proxy代理
3. 处理ES6
4. 处理样式
5. 处理图片

高级配置

1. 多入口
2. 抽离CSS文件
3. 抽离公共代码和第三方库
4. 懒加载
5. 处理JSX
6. 处理vue

优化构建速度

可用于生产环境

1. 优化babel-loader
2. IgnorePlugin
3. noParse
4. happyPack
5. ParallelUglifyPlugin

不可用于生产环境

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

优化产出代码

1. 小图片base64编码
2. bundle 加 hash
3. 懒加载
import
对大文件使用
4. 提取公共代码
5. IgnorePluging
6. 使用CDN加速
7. 使用production
自动压缩、
删掉调试代码
自动开启tree-Shaking
8. Scope Hosting

babel

1. 环境搭建&基本配置
2. babel-polyfill
3. babel-runtime

10-24 webpack面试真题-前端代码为何要打包
10-25 webpack面试真题-为何Proxy不能被Polyfill
10-26 webpack面试真题-常见性能优化方法

wbpack面试题

前端代码为何要打包

代码层面

1. 体积更小（Tree-Shaking、压缩、合并），加载更快
2. 编译高级语言或语法（TS，ES6+, 模块化，scss）
3. 兼容性和错误提示（pollyfill、postcss、eslint）

打包流程、前端工程化方面

1. 统一、高效的开发环境
2. 统一的构建流程和产出标准
3. 集成公司构建规范（提测、上线等）

module chunk bundle的区别

1. module-各个源码文件，webpack中一切皆模块
2. chunk-多模块合成，如entry import() splitChunk
3. bundle-最终产出的文件

loader和plugin的区别

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

常见loader和plugin有哪些

babel和webpack的区别

1. babel-JS 新语法编译工具，不关心模块化
2. webpack-打包构建工具，是多个loader plugin的集合

如何产出一个lib

1. 参考wbpack.dll.js
2. output.library

babel-polyfill和babel-runtime的区别

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

webpack如何使用懒加载

1. import（）
2. 结合Vue React异步组件
3. 结合Vue-router React-router异步加载路由

为何Proxy不能被Polyfill ?

1. 如Class可以用function模拟
2. 如Promise可以用callback来模拟
3. 但Proxy的功能用Object.defineProperty无法模拟

优化构建速度

可用于生产环境

1. 优化babel-loader
2. IgnorePlugin
3.noParse
4. happyPack
5. ParellelUglifyPlugin

不能用于生产环境!

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

优化产出代码

1. 小图片base64编码
2. bundle 加hash
3. 懒加载
4. 提取公共代码
5. 使用CDN加速
6.ignorePlugin
7. 使用production
8. Scope Hosting