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 值。