剛開始用webpack的同學很容易掉進圖片打包這個坑里，比如打包出來的圖片地址不對或者有的圖片并不能打包進我們的目標文件夾里。
下面我們就來分析下在webpack項目中圖片的應用場景。
1.CSS文件中的背景圖等設置
項目目錄圖：
以下以我項目中的test.css為例
.test{ color: red; width: 150px; height: 100px; overflow: hidden; background: url("../img/box@2x.png") 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" style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, "Microsoft YaHei";"> 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]' } ] }};以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
