Question

目前我正在通过data:在我的css和img标签中使用base64图像，因为你可以想象通过在文件中包含整个base64代码会变得非常混乱，因此我想知道是否有从外部文件导入它的方法以及如何使用webpack处理它们？

Answer 1

您可以尝试使用gulp-css-base64插件，该插件将读取图像所在文件夹中的所有图像。每次运行gulp任务时，它都会使用新映像更新css文件（或更新当前的映像）。

gulp.task('default', function () {
    return gulp.src('src/css/input.css')
        .pipe(cssBase64({
            baseDir: "../../images",
            maxWeightResource: 100,
            extensionsAllowed: ['.gif', '.jpg']
        }))
        .pipe(gulp.dest('dist'));
});

Answer 2

webpack的url-loader完全是出于此目的！

要配置它，只需将其添加到webpack-config的加载器中：

{
  test: /\.(svg|jpg|png|gif)$/,
  loader: 'url?limit=10000',
}

如果URL-loader的大小低于指定的限制，则URL-loader返回您需要/导入的文件的数据URI，否则它会捆绑文件并返回URL。

限制以字节为单位指定，因此10000大致意味着任何10kB以下的文件都将作为数据URI返回。如果您指定无限制，则所有内容都将编码为数据URI。我建议你只将它用于小文件。

因此，一旦设置完毕，var smallImageUri = require('./smallImage.png');应该可以满足您的需求！如果smallImage.png低于您配置的限制，则为数据URI;如果捆绑的图片数量较大，则为数据URI。

包括来自其他文件的base64图像？

2 个答案: