react概览webpack基础

react概览

课程介绍

webpack

构建依赖图->bundle

首屏渲染：

减少白屏等待时间

数据、结构、样式都返回。需要服务器的支持

性能优化

***webpack干的事情

模块化开发

优势：

多人团队协作开发

可复用

单例：全局冲突

闭包

模块导入的顺序

require.js

优点：自身处理了模块依赖

缺点：前置导入，把所有的模块先导入，才能把函数执行。期望一个模块导入成功就可以做该模块做的事情。

node.js中的common.js

什么时候用什么时候导入

ES6

导出方式

export语法：

必须先声明再同时导出

或者导出一个对象，对象key的值是已经定义的变量；然后key与值命名相同。

export default语法

import语法

webpack配置启动

npm install webpack

全局有冲突问题，一般推荐是本地安装

打包原理

基础配置&强缓存

零配置下，less编译成css、图片、es6转es5都无法处理……

相对地址：./ 或 ../

绝对地址：用path模块。你电脑上的地址

hash：打包后的文件创建hash名。利于强缓存机制下资源更新。

HTML打包编译

还得把js导入进来

基础配置：

如js自动导入，并且加上defer

多入口/出口配置

*devServer

打包编译优化压缩，自己本地启动一个web服务，用本地服务先把开发东西预览。

作用：

*proxy

以前缀区分

CSS全套处理方案

less预编译成css，css兼容：css3加前缀-moz等，@import、url特殊语法导入外部资源，css打包单独成文件或内嵌……

css-loader 处理@import 和url

style-loader 加到head里

postcss-loader 兼容前缀

全局的css在入口中基于模块规范引入

*css兼容

1. browserlist：配置浏览器的兼容列表。告诉他我们要兼容哪些浏览器

1. postcss-loader做相关的配置
2. 并且加入autoprefixer插件

合并压缩打包

*抽离css

抽离css。替换style-loader：css代码依然在js中，只是动态创建了style标签。

JS兼容与优化

webpack自己处理合并压缩打包，

我们要处理的是js的兼容性。

babel

1. es6转换成es6

presets: @babel/preset-env

1. 内置api

如对promise进行重写

include和exclude

图片的处理

打包到dist目录下

转成base64。图片需要先发网络请求，图片资源编码，然后渲染。（不需要网络请求也不需要编码）

我们希望webpack能帮我们做这件事情：代码里写的还是图片路径，但是最后打包后的是base64。

如果未加入loader，则webpack不会处理图片。

举例是这2个场景