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