webpack 之打包圖片

 我們可以使用webpack打包圖片。打包的具體步驟如下：

1.打包圖片時我們需要file-loader。安裝flie-loader。

npm install --save-dev file-loader

2.配置webpack.fig.js

  module:{
  rules:[
    {
      test:/\.(png|svg|jpg|gif)$/,
      use:["file-loader?limit=8192&name=dist/[hash].[ext]"]
    }
    ]
  }
};

注意：limiet的意思是：圖片大小小於limit時，使用base64轉碼。大於limit時，正常打包。

        name：通過name屬性改變圖片的打包目錄和文件名。

        hash：圖片經過處理後，會在輸出文件夾中生成圖片，此時圖片的名字爲hash。ext代表圖片的格式。

3.項目的結構如下

webpack_demo
  --node_modules               
  --src
    --index.js
    --icon.jpg
    --style.css
  --webpack.config.js 
  --package.json
  --index.js

4.index.js如下：

 import './style.css';
 import Icon from "./icon.jpg"

  function component() {
    var element = document.createElement('div');

    element.innerHTML ="hello webpack";
    element.classList.add('hello');

    var myIcon = new Image();
  	myIcon.src = Icon;
    console.log(myIcon);

    element.appendChild(myIcon);

    return element;
  }
  document.body.appendChild(component());

當你 import

import Icon from "./icon.jpg"，  該圖像將被處理並添加到 dist 目錄，並且變量將包含該圖像在處理後的最終 url

5.style.css文件：

.hello {
  color: red;
  background: url('./icon.jpg');
}

5。打包：

webpack --mode development

此時，會看到dist下的圖片名稱被更改。打開index.htm。會看到頁面的顯示。body中有img標籤（注意看圖片的src屬性，與第2步配置的路徑相同）。head中還有style標籤。

6.圖片的引用路徑

  若沒有name屬性，則圖片的引用路徑爲publicPath+filename。也就是js、css中被打包後的圖片的路徑。

  若有name屬性，則圖片的引用路徑爲publicPath+name。也就是js、css中被打包後的圖片的路徑。

  ！！！一定要設置publicPath。