- 抽離圖片文件打包到指定路徑下
- 壓縮抽離的圖片資源
- 配置生成html中的圖片路徑
1、準備測試環境
//工做區間 src//文件夾 index.js//入口文件 index.css//樣式文件 index.html//結構文件 image//圖片文件夾 package.json//配置打包的環境信息 webpack.config.js//打包配置文件
首先須要準備打包插件（這裏打包文件還不是用來處理圖片文件的）：css
1 "clean-webpack-plugin": "^3.0.0",//清除構建文件夾 2 "css-loader": "^3.0.0",//用來加載css文件 3 "html-webpack-plugin": "^3.2.0",//用來抽離html文件 4 "style-loader": "^0.23.1",//用來將css樣式轉換成行間樣式 5 "webpack": "^4.35.2",//打包工具 6 "webpack-cli": "^3.3.5"//打包工具的指令集
經過上面的註釋，能夠看到上面的打包配置還不能處理圖片資源，因此在測試上面的打包插件配置是否成功的狀況下暫時不要在css中出現引用圖片路徑的樣式，在html引入的圖片路徑在抽取html文件的時候並不會對路徑進行處理，打包後（打包先後路徑不一致）可能會找不到圖片。html
1 var path = require('path'); 2 var {CleanWebpackPlugin} = require('clean-webpack-plugin'); 3 var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 module.exports = { 5 entry:{ 6 index:'./src/index.js' 7 }, 8 output:{ 9 path:path.resolve(__dirname,'dist'), 10 filename:'[name][hash:5].bundle.js' 11 }, 12 module:{ 13 rules:[ 14 { 15 test:/\.css$/, 16 use:[ 17 {loader:'style-loader'}, 18 {loader:'css-loader'} 19 ] 20 } 21 ] 22 }, 23 plugins:[ 24 new CleanWebpackPlugin(), 25 new HtmlWebpackPlugin({ 26 template:'./src/index.html' 27 }) 28 ], 29 mode:'development' 30 }
測試上面的打包環境無誤的狀況下正式進入webpack提取圖片文件操做。webpack
2、抽離圖片文件打包到指定路徑下
在前面準備的打包配置基礎上再增長兩個加載器插件：web
npm install url-loader --save-dev npm install file-loader --save-dev
而後，這一步就能夠給css代碼中添加圖片路徑了，config.js文件中添加下面這段配置：npm
1 module:{ 2 rules:[ 3 { 4 test:/\.(png|jpg|jpeg|gif)$/, 5 use:[ 6 { 7 loader:'url-loader', 8 options:{ 9 name:'[name][hash:5].[ext]',//設置抽離打包圖片的名稱--[ext]用來獲取圖片的後綴 10 limit:100000,//限制圖片大小 <= 100kb 進行base64編碼（小於100kb打包進js文件）--測試時根據圖片的大小調整 11 outputPath:'image'//設置輸出文件夾名稱，這個文件夾會與主入口文件在同一路徑下 12 } 13 } 14 ] 15 } 16 ] 17 }
這段配置也還只能配置抽離css中的圖片文件，並且還只是抽離，並未對圖片進行壓縮處理，接下來看怎麼配置壓縮圖片文件。json
3、壓縮抽離的圖片資源
繼續前面的步驟，下載安裝圖片壓縮須要的加載器：ide
npm install img-loader --save-dev npm install imagemin-loader --save-dev npm install imagemin-pngquant --save-dev
而後圖片資源（正則匹配圖片後綴）的加載器模塊下添加圖壓縮相關加載器和插件，爲了更好的展現代碼結構這段代碼會與上一步的示例代碼部分重疊：工具
1 module:{ 2 rules:[ 3 { 4 test:/\.css$/, 5 use:[ 6 {loader:'style-loader'}, 7 {loader:'css-loader'} 8 ] 9 }, 10 { 11 test:/\.(png|jpg|jpeg|gif)$/, 12 use:[ 13 { 14 loader:'url-loader',//給圖片資源配置路徑加載器，用於文件抽離 15 options:{ 16 name:'[name][hash:5].[ext]',//設置抽離打包圖片的名稱--[ext]用來獲取圖片的後綴 17 limit:100000,//限制圖片大小 <= 100kb 進行base64編碼（小於100kb打包進js文件）--測試時根據圖片的大小調整 18 outputPath:'image'//設置輸出文件夾名稱，這個文件夾會與主入口文件在同一路徑下 19 } 20 }, 21 { 22 loader:'img-loader',//配置圖片資源加載器，用於圖片壓縮 23 options:{ 24 plugins:[//給圖片資源加載配置插件 25 require('imagemin-pngquant')({//用於圖片壓縮的imagemin-pngquant，還有一個隱式調用的加載器imagemin-loader 26 quality:[0.3,0.5]//圖片壓縮30%~50% 27 }) 28 ] 29 } 30 } 31 ] 32 } 33 ] 34 }
最後，就剩下html文件中的圖片引用沒有處理。測試
4、配置生成html中的圖片路徑
經過配置html文件的加載器，而後再配置上應用圖片的標籤名和屬性名，html資源中的圖片應用就會被添加到加載器中進行處理（包括上面的圖片抽離和壓縮），先下載解析html文件的加載器：ui
npm install html-loader --save-dev
config配置（增長如下配置）：
1 module:{ 2 rules:[ 3 { 4 test:/\.html$/, 5 use:[ 6 { 7 loader:'html-loader', 8 options:{ 9 attrs:['img:src']//配置html文件中img標籤的src屬性值 10 } 11 } 12 ] 13 14 } 15 ] 16 }
最後須要注意的是，針對每種圖片格式的壓縮配置都不是同樣的，也就是說有不一樣的壓縮插件，詳細參考npm插件手冊：https://www.npmjs.com/package/img-loader