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

这是因为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请求图片
网友评论