首頁  >  文章  >  web前端  >  html中的圖片如何打包? html圖片打包的方法

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

不言
不言原創
2018-08-18 16:01:006278瀏覽

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

webpack中是不喜歡你使用標籤html中的圖片如何打包? html圖片打包的方法來引入圖片的,但是我們作前端的人特別熱衷於這種寫法,國人也為此開發了一個: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="./images/10.jpg"></p>

安裝==html-withimg-loader==解決html中html中的圖片如何打包? html圖片打包的方法的問題

 npm install html-withimg-loader –save

設定loader(webpack-config.js)

{    test: /\.(htm|html)$/i,
     use:[ &#39;html-withimg-loader&#39;] 
}

再次進行打包,在dist/images目錄下出現img圖片

npm run server 查看瀏覽器

#相關推薦:

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

#有時css引用圖片打包後找不到資源檔是什麼原因

以上是html中的圖片如何打包? html圖片打包的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn