webpack—url-loader 解決專案中圖片打包路徑問題
摘要：
剛開始用webpack的同學很容易掉進圖片打包這個坑裡，比如打包出來的圖片地址不對或者有的圖片並不能打包進我們的目標資料夾裡。
下面我們就來分析下在webpack專案中圖片的應用場景。
1.CSS檔案中的背景圖等設定
專案目錄圖：
以下以我專案中的test.css為例...
剛開始用webpack的同學很容易掉進圖片打包這個坑裡，比如打包出來的圖片地址不對或者有的圖片並不能打包進我們的目標資料夾裡。
下面我們就來分析下在webpack專案中圖片的應用場景。
1.CSS檔案中的背景圖等設定
專案目錄圖：
以下以我專案中的test.css為例
.test{
color: red;
width: 150px;
height: 100px;
overflow: hidden;
background: url("../img/[email protected]") no-repeat;
background-size: 150px auto;
}
.img-base64{
color: red;
width: 150px;
height: 100px;
overflow: hidden;
background: url("../img/media1.png") no-repeat;
background-size: 100px auto;
}
#img-e {
width:100px;
}
2.html檔案中引入圖片，下面為模板檔案index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack-img</title> </head> <body> 1.css背景圖 圖片格式 <div class="test"></div> 2.css背景圖 轉化為base64 <div class="img-base64"></div> 3.html裡引入圖片 <div><img src="img/media4.png" alt=""></div> 4.js裡引入圖片 </body> </html>
3.js中引入圖片
require('../css/test.css');
var imgSrc = require('../img/do.gif');
var img = new Image();
img.id = 'img-e';
img.src = imgSrc;
document.body.appendChild(img);
url-loader
在 webpack 中引入圖片需要依賴 url-loader 這個載入器。
在 webpack.config.js 檔案中配置如下：
{
test:/\.(jpg|png|gif|bmp|jpeg)$/,
loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
}
test 屬性代表可以匹配的圖片型別，除了 png、jpg 之外也可以新增 gif 等，以豎線隔開即開。
loader 後面 limit 欄位代表圖片打包限制，這個限制並不是說超過了就不能打包，而是指當圖片大小小於限制時會自動轉成 base64 碼引用。上例中大於8192位元組的圖片正常打包，小於8192位元組的圖片以 base64 的方式引用。
url-loader 後面除了 limit 欄位，還可以通過 name 欄位來指定圖片打包的目錄與檔名
而使用extractTextPlugin外掛時， 需要配置publicPath: "../" , 不配置時css檔案中背景圖預設地址會在css資料夾下查詢圖片資源，導致專案圖片路徑不正確
webpack.config.js 配置檔案如下：
const webpack = require("webpack")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const extractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')
const extractCSS = new extractTextPlugin("css/[name].[hash:6].css")//
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//壓縮css外掛
module.exports = {
//注意這裡是exports不是
entry: './src/js/main.js',
output: {
publicPath:"./",
path: path.resolve(__dirname + "/dist"),
//打包後的js檔案存放的地方
filename: "js/[name].[hash:6].js" //打包後的js檔名
},
plugins: [
extractCSS,
new OptimizeCssAssetsPlugin(),//壓縮css
new webpack.optimize.UglifyJsPlugin(),//new uglify(),//壓縮js
new HtmlWebpackPlugin({
filename: 'index.html',
template:'src/index.html'
})
],
module: {
rules: [ //1.0的是loaders
//處理js中的loader
{
test: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, '/src'),
//指定打包的檔案
exclude: path.resolve(__dirname, '/node_modules') //排除打包的檔案，加速打包時間
},
//處理css中的loader
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
publicPath: "../",
use: [
{
loader: 'css-loader',
options:{
minimize: true //css壓縮
}
}
]
})
},
//處理html模板中的loader
{
test: /\.html$/,
loader: 'html-loader'
},
//處理ejs模板中的loader,以.tpl字尾結尾的
{
test: /\.tpl$/,
loader: 'ejs-loader'
},
//處理圖片中的loader,file-loader,url-loader,image-webpack-loader相互配合(圖片格式轉換base64 圖片壓縮)
{
test:/\.(jpg|png|gif|bmp|jpeg)$/,
loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
}
]
}
};