webpack解析url

1. 默認(rèn)情況下，webpack無法處理css文件中的URL地址，不管是圖片還是字體庫(kù)，只要是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給定的值為圖片大?。?690字節(jié)），如果圖片大于等于給定的limit值，則不會(huì)被轉(zhuǎn)化成base64格式字符串，如果圖片小于給定的limit值則會(huì)被轉(zhuǎn)化為base64字符串

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

4. 設(shè)置不改變?cè)瓉淼拿趾秃缶Y名name=[name].[ext]
5. 圖片名不能重復(fù)，即便存放路徑不同，在重復(fù)時(shí)后面的同名圖片會(huì)覆蓋前面圖片，最終只會(huì)顯示同一張圖片
6. 為了防止這種情況在名字之前加入一段hash值，這樣同名文件就會(huì)被區(qū)分開來

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

7. 如果要通過路徑的形式去引入node_modules中相關(guān)文件，可以直接省略路徑前面的node_modules這層目錄，直接寫包的名稱然后跟上具體的文件路徑(比如引入一個(gè)bootstrap樣式)

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

8. 處理字體文件loader，json文件中不能寫注釋

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

webpack中babel的配置

1. class是es6中提供的語法，是用來實(shí)現(xiàn)es6中面向?qū)ο缶幊痰姆绞?，class和static與Java中類似（此時(shí)還不能運(yùn)行成功）

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

2. webpack中默認(rèn)只能處理一部分es6語法，一些更高級(jí)的es6語法或者es7語法webpack處理不了，這時(shí)候就需要借助第三方loader幫助webpack處理這些語法
3. 通過babel可以將高級(jí)語法轉(zhuǎn)化為低級(jí)語法
4. 安裝，運(yùn)行兩個(gè)命令，安裝兩套包，去安裝babel相關(guān)的功能

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

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

5. 打開webpack配置文件，在module節(jié)點(diǎn)寫的rules數(shù)組中添加一個(gè)新的匹配規(guī)則

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

6. 在配置babel的loader規(guī)則時(shí)必須把node_module目錄通過exclude排除，
7. 排除node_module目錄的原因
   • 如果排除node_module，babel會(huì)把node_module目錄下的所有第三方j(luò)s文件都打包編譯，這會(huì)非常消耗CPU，同時(shí)打包速度非常慢
   • babel 把node_module中的js文件轉(zhuǎn)化完畢項(xiàng)目也無法正常運(yùn)行
8. 在項(xiàng)目的根目錄中新建一個(gè)叫做 .babelrc 的babel配置文件，這個(gè)配置文件屬于json格式
9. 在.babelrc中的配置 presets放入語法（剛剛安裝的）

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

10. babel的配置成功
    

render方法渲染組件

1. render的使用

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

2. createElements(是一個(gè)形參，名字并不固定)是一個(gè)方法，調(diào)用他能夠把指定的 組件模板渲染為HTML結(jié)構(gòu)

3. return的結(jié)果會(huì)替換頁面中el指定的那個(gè)容器（會(huì)把控制的div刪除，然后用login組件代替）

   
   
4. 由于在使用render替換組件后會(huì)銷毀控制的div，所以在render中只能調(diào)用一個(gè)組件