webpack4——css中图片处理

安装：

npm -d install file-loader url-loader

配置：

module: {
    rules: [ {
      test: /\.(jpg|png|gif)/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: 500000，
          outputPath:'images/' //打包后的图片放在 dist/images/下边
        }
      }]
    }]
  },

在index.css中引入同级目录下的一张图片，
打包看效果
发现图片被打包进./dist/entry.js中（base64的形式）因为图片小于limit的值，否则会拷贝过去到根目录一张图片

**
url-loader：会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。
**

**
解决引用路径的问题，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
**