Issue while compiling .glsl files..

I have GLSL shaders, not sure how to setup the webpack mix to compile the .glsl files…

This is the issue that I get on npm run watch:

And this is how my webpack.mix.js looks like: `

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

  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel application. By default, we are compiling the Sass
   | file for the application as well as bundling up all the JS files.
   |
   */
  
  mix.react('resources/js/app.js', 'public/js')
      .sass('resources/sass/bootstrap.scss', 'public/css')
          .less('resources/less/app.less', 'public/css'); 
           
  mix.webpackConfig({
      module: {
        rules: [
              {
              test: /\.(glsl|frag|vert)$/,
              loader: 'raw-loader',
              exclude: /node_modules/
              },
      
              {
              test: /\.(glsl|frag|vert)$/,
              loader: 'glslify-loader',
              exclude: /node_modules/
              }
          ]
      } 
     });

`

[thecrypticace]

Try this:

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.(glsl|frag|vert)$/,
        exclude: /node_modules/,
        use: [
          'raw-loader',
          'glslify-loader',
        ],
      },
    ],
  },
})

[iwasherefirst2]

Try this:

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.(glsl|frag|vert)$/,
        exclude: /node_modules/,
        use: [
          'raw-loader',
          'glslify-loader',
        ],
      },
    ],
  },
})

Thank you! That worked for me 😃!