(8/24) 圖片跳坑大戰--css中的圖片處理
前言：此節的開展是在上一節的基礎上進行的，（每一節都是從無到有編寫關於此節的知識），最後會附上相關完整代碼。上一節
CSS中的圖片處理
1.新建images文件夾
在src目錄下新建一個images文件夾，把需要的圖片放入images文件夾。圖片下載
2.新增標簽
在index.html文件中增加一個放置div的標簽（需要註意的是這裏修改的是src下的index.html文件，不是dist下的），代碼如下：
<div id="img"></div>
3.編寫樣式
在src目錄下的css目錄下的index.css文件中編寫樣式，如下,
src/css/index.css:
body{
background-color: #018eea;
color: red;
font-size: 32px;
text-align: center;
}
#img{
background-image: url(../images/webapck.jpg);
width:271px;
height:285px;
}
4.loader安裝
使用npm在終端安裝file-loader和url-loader。
npm install --save-dev file-loader url-loader
關於file-loader和url-loader
（1）file-loader：解決引用路徑的問題，拿background樣式用url引入背景圖來說，我們都知道，webpack最終會將各個模塊打包成一個文件，因此我們樣式中的url路徑是相對入口html頁面的，而不是相對於原始css文件所在的路徑的。這就會導致圖片引入失敗。這個問題是用file-loader解決的，file-loader可以解析項目中的url引入（不僅限於css），根據我們的配置，將圖片拷貝到相應的路徑，再根據我們的配置，修改打包後文件引用路徑，使之指向正確的文件。
（2）url-loader：如果圖片較多，會發很多http請求，會降低頁面性能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。相當於把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了。當然，如果圖片較大，編碼會消耗性能。因此url-loader提供了一個limit參數，小於limit字節的文件會被轉為DataURl，大於limit的還會使用file-loader進行copy。
5.配置url-loader
安裝之後，開始使用loader，此時在loader使用時不需要用require引入，在plugins才需要使用require引入。
webpack.config.js文件：
//模塊：例如解讀CSS,圖片如何轉換，壓縮 module:{ rules: [ { test: /\.css$/, use: [ ‘style-loader‘, ‘css-loader‘ ] },{ test:/\.(png|jpg|gif)/ , use:[{ loader:‘url-loader‘, options:{ limit:500000 } }] } ] },
註釋：
-
test:/.(png|jpg|gif)/是匹配圖片文件後綴名稱。
-
use：指定使用的loader和loader的配置參數。
-
limit：是把小於500000B的文件打成Base64的格式，寫入打包後的js中。
此處只是其中一種配置方式，其余可參考
為什麽只使用了url-loader？
在配置loader時，我們並沒有在webpack.config.js中使用file-loader，但是依然打包成功了。這個和file-loader和url-loader之間的關系有關。url-loader和file-loader是什麽關系呢？簡單的說，url-loader封裝了file-loader，url-loader不依賴於file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內置了file-loader。url-loader工作分兩種情況：
1.文件大小小於limit參數，url-loader將會把文件轉為DataURL（Base64格式）；
2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。
也就是說，其實我們只安裝一個url-loader就可以了。但是為了以後的操作方便，這裏就順便安裝上file-loader。
6.打包
在終端使用webpack命令進行打包。
webpack
7.啟動服務
在終端中執行npm run server命令，啟動我們的服務，然後通過 http://localhost:1818/ 進行訪問。
訪問效果如下：
相關完整代碼：
src/index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpack</title> </head> <body> <div id="img"></div> <div id="title"></div> </body> </html>View Code
src/entry.js:
import css from ‘./css/index.css‘
document.getElementById(‘title‘).innerHTML=‘Hello Webpack‘;
View Code
src/css/index.css:
body{ background-color: #018eea; color: red; font-size: 32px; text-align: center; } #img{ background-image: url(../images/webapck.jpg); width:271px; height:285px; }View Code
package.json:
{ "name": "webpack3", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "server": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^2.0.0", "file-loader": "^2.0.0", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.23.1", "url-loader": "^1.1.2", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.7" } }View Code
webpack.config.js:
const path = require(‘path‘); const uglify = require(‘uglifyjs-webpack-plugin‘); const htmlPlugin= require(‘html-webpack-plugin‘); module.exports={ //入口文件的配置項 entry:{ entry:‘./src/entry.js‘, //這裏我們又引入了一個入口文件 entry2:‘./src/entry2.js‘, }, //出口文件的配置項 output:{ //輸出的路徑，用了Node語法 path:path.resolve(__dirname,‘dist‘), //輸出的文件名稱 filename:‘[name].js‘ }, //模塊：例如解讀CSS,圖片如何轉換，壓縮 module:{ rules: [ { test:/\.css$/, use:[‘style-loader‘,‘css-loader‘] }, { test:/\.(png|jpg|gif)/, use:[{ loader:‘url-loader‘, options:{ limit:500000 } } ] } ] }, //插件，用於生產模版和各項功能 plugins:[ // new uglify(), new htmlPlugin({ minify:{ removeAttributeQuotes:true }, hash:true, template:‘./src/index.html‘ }) ], //配置webpack開發服務功能 devServer:{ contentBase:path.resolve(__dirname,‘dist‘), //絕對路徑 host:‘localhost‘, compress:true, port:1818 } }View Code
(8/24) 圖片跳坑大戰--css中的圖片處理