webpack解析url
- 默认情况下，webpack无法处理css文件中的URL地址，不管是图片还是字体库，只要是URL地址都处理不了
npm i url-loader file-loader
- 处理图片路径的loader
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'}
- 给url-loader传参
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=4690'}
- limit给定的值为图片大小（4690字节），如果图片大于等于给定的limit值，则不会被转化成base64格式字符串，如果图片小于给定的limit值则会被转化为base64字符串
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=4690&name=[name].[ext]'}
- 设置不改变原来的名字和后缀名name=[name].[ext]
- 图片名不能重复，即便存放路径不同，在重复时后面的同名图片会覆盖前面图片，最终只会显示同一张图片
- 为了防止这种情况在名字之前加入一段hash值，这样同名文件就会被区分开来
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=4690&name=[hash:8]-[name].[ext]'}
- 如果要通过路径的形式去引入node_modules中相关文件，可以直接省略路径前面的node_modules这层目录，直接写包的名称然后跟上具体的文件路径(比如引入一个bootstrap样式)
import 'bootstrap/dist/css/bootstrap.css'
- 处理字体文件loader，json文件中不能写注释
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}
webpack中babel的配置
- class是es6中提供的语法，是用来实现es6中面向对象编程的方式，class和static与Java中类似（此时还不能运行成功）
class Person{
static info ={name:'zs',age:20}
}
console.log(Person.info)
- webpack中默认只能处理一部分es6语法，一些更高级的es6语法或者es7语法webpack处理不了，这时候就需要借助第三方loader帮助webpack处理这些语法
- 通过babel可以将高级语法转化为低级语法
- 安装，运行两个命令，安装两套包，去安装babel相关的功能
npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
- 打开webpack配置文件，在module节点写的rules数组中添加一个新的匹配规则
{test:/\.js$/,use:'babel-loader',exclude:/node_module/}
- 在配置babel的loader规则时必须把node_module目录通过exclude排除，
- 排除node_module目录的原因
- 如果排除node_module，babel会把node_module目录下的所有第三方js文件都打包编译，这会非常消耗CPU，同时打包速度非常慢
- babel 把node_module中的js文件转化完毕项目也无法正常运行
- 在项目的根目录中新建一个叫做 .babelrc 的babel配置文件，这个配置文件属于json格式
- 在.babelrc中的配置 presets放入语法（刚刚安装的）
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
- babel的配置成功
render方法渲染组件
- render的使用
render:function(createElements){
return createElements(login)
}
- createElements(是一个形参，名字并不固定)是一个方法，调用他能够把指定的 组件模板渲染为HTML结构
-
return的结果会替换页面中el指定的那个容器（会把控制的div删除，然后用login组件代替）
- 由于在使用render替换组件后会销毁控制的div，所以在render中只能调用一个组件
