Laravel Mix：将图像转换为Base 64的配置

Question

我正在寻求关于如何设置Laravel Mix以查找某个阈值大小以下的图像资产并将它们重新编码为Base 64字符串的指导。我可以使用Webpack和url-loader实现这一点，但是我在我的Mix配置中无法让它正常工作。我尝试过的方法：

const mix = require('laravel-mix');

mix.setPublicPath('public_html/');
mix.js('resources/uxmaps/js/app.js', 'uxmaps/js/app.js').version()
.webpackConfig({
        module: {
            rules: [
{
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192,
                        outputPath: 'images'
                    },
                  },
                ],
}
            ]
        }
    })
   .sass('resources/sass/app.scss', 'css/main.css')

这段代码编译没有错误，但是并不起作用；例如我的sass文件中的背景图像 background-image: url(/assets/logo.jpg);（大小为3kb）在输出的css中仍然保持原样。

其次，我也尝试将配置中的url-loader部分分离出来放在单独的文件中（导入模块），如mix文档所述：https://laravel-mix.com/docs/5.0/extending-mix （请参阅底部的“用法”部分）。结果相同：编译没有错误，但是它根本不工作。

最后，我还尝试使用这个Post CSS插件，但在编译时，它会提示我与依赖版本有关的错误（我认为这已经过时了）。

任何指向为什么这段代码不正常工作的指针，或以其他方式使用Laravel Mix将图像转换为内联Base 64？谢谢

编辑: 我发现我在使用绝对路径的图像，因此Mix会忽略它们，就像文档中所述。如果我改用相对路径，则Mix会将css输出为background-image: url(/images/logo.jpg?dab783c3f2e3b389830733b050848c8a);，并且 - 获取这个 - url-loader带着jpg文件，在public_html/images文件夹中给我一个名为“logo.jpg”的文件，它实际上不是jpg，而是包含Base64代码的文本文件.... :/

如何将该Base 64代码写入样式表中？！

- Inigo

Answer 1

mix.override(function (webpackConfig) {}) 

一旦Mix完全生成了webpack config对象，就会触发此操作。

也许在这里尝试删除他们的文件加载器并添加您自己的设置。

- DawidK