mimetype
还可以设置mimetype对处理文件进行过滤，如url-loader?mimetype=image/png将只处理png类型的资源。
安装
npm install --save-dev url-loader
配置
该加载器对于图片和字体文件资源都适用：
{
test: /\.(png|svg|jpe?g|gif)$/,
loaders: [
// 'url-loader?name=[path][name].[ext]?[hash:8]'
{
loader: 'url-loader',
query: {
limit: 6000,
name: '[path][name].[ext]?[hash:8]'
}
}
]
}, {
test: /\.(woff|woff2|eot|ttf|otf)$/,
loaders: [{
loader: 'url-loader',
query: {
limit: 10000,
name: '[path][name].[ext]?[hash:8]'
}
}]
}
资源优化
完成以上配置后，已经可以在项目中很方便的引用各自资源了，但是通常我们还需要对图片字体等文件进行压缩优化处理，如Grunt中使用的imagemin插件一样压缩资源，webpack则提供了相关加载器img-loader。
安装
npm install --save-dev img-loader
配置
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'url-loader?name=[path][name].[ext]?[hash:8]',
{
loader: 'img-loader',
options: {
// 根据环境判断是否启用资源压缩
enabled: process.env.NODE_ENV === 'production',
gifsicle: {
interlaced: false // 替换使用渐进式渲染
},
mozjpeg: {
progressive: true, // 创建基准jpeg文件
},
optipng: {
optimizationLevel: 4, // 优化级别，0-7，值越大，压缩越多
},
pngquant: {
quality: '75-90', // 压缩质量，0-100，值越高，质量越高
speed: 3 // 执行速度，0-10，速度过高质量受损，不建议过高
},
svgo: {
plugins: [
{ removeTitle: true }, // 去除标题信息
{ convertPathData: false } // 转换路径为更短的相对或决定路径
]
}
}
}
]
}
以上为常见使用配置，更多详细配置信息请查看对应说明imagemin文档，特别注意的是上面使用了process.env.NODE_ENV当前环境变量，只有在生产环境启用图片压缩，因为压缩过程比较比较耗时，可能会降低开发、调试效率。
数据资源
对于数据类型文件资源，webpack内置支持加载解析.json文件，而其他类型则需要安装配置相应加载器，如.xml文件，需要安装并配置xml-loader。
资源管理的思考
在传统或稍早一点的应用中，我们通常会将所有的图片，字体等资源放在一个基础目录下，如assets/或images，但是对于那些在多项目间重复的插件代码或资源来说，每一次迁移，我们都得在一大堆图片，字体资源里寻找出我们需要迁移的资源，这对代码可重用和其独立性有一定限制，而且与现在提倡的组件化开发模式也不相符。