html中的圖片如何打包？ html圖片打包的方法

這篇文章帶給大家的內容是關於html中的圖片如何打包？ html圖片打包的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

webpack中是不喜歡你使用標籤來引入圖片的，但是我們作前端的人特別熱衷於這種寫法，國人也為此開發了一個：html-withimg- loader。他可以很好的處理我們在html 中引入圖片的問題

專案安裝：npm install –save-dev webpack

全域安裝：npm install -g webpack

# ** webpack不鼓勵全域安裝webpack,如果在終端中用webpack進行打包項目，就會出現不是內部指令或外部指令。

• 需要設定package.json裡面的script選項，我們先前的課程已經學習了設定webpack-dev-server指令，在這個指令下面我們再加一個build指令來打包項目使用

  "scripts": {    
  "server": "webpack-dev-server --open",    
  "build":"webpack"
  },

刪除dist目錄，npm run build進行打包

打包html中的圖片：

現在進行==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="/static/imghwm/default1.png"  data-src="./images/10.jpg"  class="lazy"   alt="html中的圖片如何打包？ html圖片打包的方法" ></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圖片打包的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！