图片加载及优化处理为base-64

2018-12-11  本文已影响0人  焦迈奇

当你在css\sass文件中使用了图片,你会发现

image.png
这是因为sass类型的文件是处理不了图片模块的。
解决方式:
file-loader处理文件的导入
npm install --save-dev file-loader
{
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }

注:一定要注意test里面的后缀名,如果你的图片后缀名不再其中任然会报同样的错误。

image-webpack-loader压缩和优化图片
npm install image-webpack-loader --save-dev

{
+             loader: 'image-webpack-loader'
          ]
        }

本来应该添加option,规定每种图片的处理,但是如果用错,则会导致图片打不开的问题。

减少一次http请求图片

上一篇下一篇

猜你喜欢

热点阅读