diaREact/webpack.mix.js

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

mix.options({
    fileLoaderDirs:  {
        fonts: 'diary/public/fonts'
    }
});

mix
    .webpackConfig({
        resolve: {
            fallback: {
                crypto: require.resolve("crypto-browserify"),
                stream: require.resolve("stream-browserify")
            }
        }
    })
    .ts('resources/js/app.ts', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css')
    .copyDirectory('resources/img/**', 'public/img')
    .copyDirectory('resources/fonts/**', 'public/fonts');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);