webpack中圖片的引用

module:{
         rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.png$/,
        use: { loader: 'url-loader', options: { limit: 100000 } },
      },
      {
        test: /\.jpg$/,
        use: [ 'file-loader' ]
      }
    ]
    
    }

首先安裝上面所用到的loader.也可以不用file-loader，url-loader本身就是基於file-loader的。
url-loader封裝了file-loader。url-loader不依賴於file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內置了file-loader

rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg)$/,
use: { loader: 'url-loader', options: { limit: 100 } },
}
]

1.在js文件中引用圖片文件時，需要使用require('img.png')進行引入。

document.getElementById("app").style.backgroundImage='url('+require('./3.jpg')+')';

或者

var imgUrl=require('../images/1.jpg');

document.getElementById("app").style.backgroundImage='url('+imgUrl+')';

)';

最終在dist的目錄下會出現該jpg文件。不能再js里直接寫路徑如（url('./3.jpg'）)，因為打包時所有js代碼不會改變，路徑就還是這個路徑，但是打包后的文件輸出路徑和原來不一樣了，路徑就會找不到。

2.在css中，就可以按照原始的方法引入圖片了。file-loader（url-loader）會將url('./3.jpg'）轉換為url(require('./3.jpg')），打包后在dist目錄下會出現該圖片文件。

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background: url(../images/2.jpg) no-repeat;
  width:100%;
  height:500px;
}

 

3.在html中，如果按照原始的方法設置圖片路徑，打包后的文件路徑也是不會改變的。所以在dist目錄下，文件的路徑就會找不到。