導入外部圖片和字體

原因:默認情況下webpack無法處理css文件中的圖片url地址和字體樣式,需要配置第三方loader

導入外部圖片資源配置

1.安裝url-loader和file-loader

cnpm i url-loader file-loader  -D

2.在module的rules里加入配置信息

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

 

 

導入外部字體配置

1.安裝bootstrap

cnpm i bootstrap  -D

2.在main.js引入bootstrap.css

//調用node_modules裏的文件,可以不寫node_modules這一層

import "bootstrap/dist/css/bootstrap.css"

3. 在module的rules里加入配置信息

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章