webpack圖片打包

url-loader

在 webpack 中引入圖片須要依賴 url-loader 這個加載器。

安裝：

npm install url-loader --save-dev

固然你能夠將其寫入配置中，之後與其餘工具模塊一塊兒安裝。

在 webpack.config.js 文件中配置以下：

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.(png|jpg)$/,
　　　　　　loader: 'url-loader?limit=8192'
　　　　}
　　]
}    

test 屬性表明能夠匹配的圖片類型，除了 png、jpg 以外也能夠添加 gif 等，以豎線隔開即開。

loader 後面 limit 字段表明圖片打包限制，這個限制並非說超過了就不能打包，而是指當圖片大小小於限制時會自動轉成 base64 碼引用。上例中大於8192字節的圖片正常打包，小於8192字節的圖片以 base64 的方式引用。

url-loader 後面除了 limit 字段，還能夠經過 name 字段來指定圖片打包的目錄與文件名：

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.(png|jpg)$/,
　　　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
　　　　}
　　]
}

上例中的 name 字段指定了在打包根目錄（output.path）下生成名爲 images 的文件夾，並在原圖片名前加上8位 hash 值。