webpack中图片的引用

Posted 2020-10-17 申小贺

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目录下，文件的路径就会找不到。