webpack解析url

1. 默认情况下，webpack无法处理css文件中的URL地址，不管是图片还是字体库，只要是URL地址都处理不了

npm i url-loader file-loader

2. 处理图片路径的loader

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'}

2. 给url-loader传参

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=4690'}

3. limit给定的值为图片大小（4690字节），如果图片大于等于给定的limit值，则不会被转化成base64格式字符串，如果图片小于给定的limit值则会被转化为base64字符串

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=4690&name=[name].[ext]'}

4. 设置不改变原来的名字和后缀名name=[name].[ext]
5. 图片名不能重复，即便存放路径不同，在重复时后面的同名图片会覆盖前面图片，最终只会显示同一张图片
6. 为了防止这种情况在名字之前加入一段hash值，这样同名文件就会被区分开来

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=4690&name=[hash:8]-[name].[ext]'}

7. 如果要通过路径的形式去引入node_modules中相关文件，可以直接省略路径前面的node_modules这层目录，直接写包的名称然后跟上具体的文件路径(比如引入一个bootstrap样式)

import 'bootstrap/dist/css/bootstrap.css'

8. 处理字体文件loader，json文件中不能写注释

{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}

---

webpack中babel的配置

1. class是es6中提供的语法，是用来实现es6中面向对象编程的方式，class和static与Java中类似（此时还不能运行成功）

class Person{
    static info ={name:'zs',age:20}
}
console.log(Person.info)

2. webpack中默认只能处理一部分es6语法，一些更高级的es6语法或者es7语法webpack处理不了，这时候就需要借助第三方loader帮助webpack处理这些语法
3. 通过babel可以将高级语法转化为低级语法
4. 安装，运行两个命令，安装两套包，去安装babel相关的功能

npm i babel-core babel-loader babel-plugin-transform-runtime -D

npm i babel-preset-env babel-preset-stage-0 -D

5. 打开webpack配置文件，在module节点写的rules数组中添加一个新的匹配规则

{test:/\.js$/,use:'babel-loader',exclude:/node_module/}

6. 在配置babel的loader规则时必须把node_module目录通过exclude排除，
7. 排除node_module目录的原因
   • 如果排除node_module，babel会把node_module目录下的所有第三方js文件都打包编译，这会非常消耗CPU，同时打包速度非常慢
   • babel 把node_module中的js文件转化完毕项目也无法正常运行
8. 在项目的根目录中新建一个叫做 .babelrc 的babel配置文件，这个配置文件属于json格式
9. 在.babelrc中的配置 presets放入语法（刚刚安装的）

{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

10. babel的配置成功
    

---

render方法渲染组件

1. render的使用

render:function(createElements){
                        return createElements(login)
                    }

2. createElements(是一个形参，名字并不固定)是一个方法，调用他能够把指定的 组件模板渲染为HTML结构

3. return的结果会替换页面中el指定的那个容器（会把控制的div删除，然后用login组件代替）

   
   
4. 由于在使用render替换组件后会销毁控制的div，所以在render中只能调用一个组件

---