本篇文章給大家帶來的內容是關于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 查看瀏覽器

相關推薦：

圖片路徑導致webpack打包錯誤如何處理

有時css引用圖片打包后找不到資源文件是什么原因

以上就是html中的圖片如何打包？html圖片打包的方法的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。