這篇文章帶給大家的內容是關於html中的圖片如何打包? html圖片打包的方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
webpack中是不喜歡你使用標籤來引入圖片的,但是我們作前端的人特別熱衷於這種寫法,國人也為此開發了一個:html-withimg- loader。他可以很好的處理我們在html 中引入圖片的問題
# ** webpack不鼓勵全域安裝webpack,如果在終端中用webpack進行打包項目,就會出現不是內部指令或外部指令。
需要設定package.json裡面的script選項,我們先前的課程已經學習了設定webpack-dev-server指令,在這個指令下面我們再加一個build指令來打包項目使用
"scripts": { "server": "webpack-dev-server --open", "build":"webpack" },
刪除dist目錄,npm run build進行打包
現在進行==npm run build==打包圖片並沒有放入dist/images目錄下,需要設定url-loader選項
module:{ rules: [ { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{ test:/\.(png|jpg|gif)/ , use:[{ loader:'url-loader', options:{ limit:5000, outputPath:'images/', } }] } ] },
刪除dist目錄,進行npm run build 打包,可以把圖片打包到images資料夾下
在src目錄下的index.html中插入圖片
<p><img src="./images/10.jpg"></p>
安裝==html-withimg-loader==解決html中的問題
npm install html-withimg-loader –save
設定loader(webpack-config.js)
{ test: /\.(htm|html)$/i, use:[ 'html-withimg-loader'] }
再次進行打包,在dist/images目錄下出現img圖片
npm run server 查看瀏覽器
#相關推薦:
以上是html中的圖片如何打包? html圖片打包的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!