在以前的文章中咱們已經完成了webpack對於腳本、css、html的處理。php
經過閱讀本文,你能夠解決如下幾個問題:css
其實處理字體和圖片,使用一個url-loader就能夠了。html
先安裝一下loaderwebpack
npm install url-loader –-save-dev
顯示安裝成功,這裏不用像以前去找包,所以不用理會WARN,那是告訴你npm 3不會安裝所依賴的包。web
在配置文件中使用url-loader,在module中的css-loader後面添加url-loader:npm
module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, { test: /\.(gif|png|jpg)\??.*$/, loader: 'url-loader' }
修改src -> page ->index ->index.css隨便引入一張圖片。app
body{
background: url('../../image/test-image.jpg');
}
以後執行webpack咱們看到執行結果svg
圖片引入進來了,可是顯示的是base64格式的,接下來咱們使其顯示圖片名字,經過配置url-loader的參數能夠實現這個功能。把以前的url-loader的配置進行修改字體
{
test: /\.(gif|png|jpg)\??.*$/,
loader: 'url-loader?limit=100&name=resource/[name].[ext]'
}url
參數說明:
limit:顯示文件的大小,小於這個值就會被打包成剛纔看到的base64的格式,而大於這個值的話就會以文件的形式進行打包,
&name=resource:而且把它放在resouce
[name].[ext]:文件的名字+擴展名,這樣打包的話擴展名不會發生改變。
前面已經提到了webpack對字體和圖片都是使用咱們剛纔的url-loader來處理,
其實處理字體只要再加上幾個字體的格式就能夠了。加上woff|svg|eot|ttf便可:
{ test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: ‘url - loader ? limit = 100 & name = resource / [name]. [ext]’ }