Simple Example with raw-loader

Can you please provide the most simple example to use raw-loader for .frag files using craco ?

Thanks

here is my non working test:

/* craco.config.js */
module.exports = {
  webpack: {
    alias: {},
    plugins: [],
    mode: 'extends',
    configure: { 
      module: {          
        rules: [
          {
            test: /\.frag$/,
            use: 'raw-loader'
          }
        ]
      }, 
    }
  },
}

[melMass]

It was easier than expected!!

Raw Loader for Craco:

/* craco-plugin-raw-loader.js */

const { loaderByName, addBeforeLoader } = require('@craco/craco')

module.exports = {
  overrideWebpackConfig: ({
    webpackConfig, cracoConfig, pluginOptions, context: { env, paths } 
  }) => {

    const rawLoader = {
      test: pluginOptions.test,
      use: [ 'raw-loader' ]
    }

    addBeforeLoader(webpackConfig, loaderByName('file-loader'), rawLoader)

    return webpackConfig
  }
}

Use example

here to detect .frag files:

/* craco.config.js */

module.exports = {
  webpack: {
    plugins: [
     { plugin: rawWebpackConfigPlugin, options: { test: /\.frag$/ } }
  ]
}

[patricklafrance]

Hi @melMass

The problem is that your rule is added after the file-loader which is CRA fallback for every resources that are not handled by any other specific loader.

Here’s a comment from CRA webpack config:

// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.

The solution is to add your loader before the file-loader.

You can do this 2 ways with the help of craco utility function addBeforeLoader:

1- By using the function override of configure:

module.exports = {
  webpack: {
    configure: function(webpackConfig) {
         const fragLoader = {
            test: /\.frag$/,
            use: ['raw-loader']
         };

         addBeforeLoader(webpackConfig, loaderByName("file-loader"), fragLoader );

         return webpackConfig;
    }
  },
}

2- Or by creating a craco plugin for raw-loader (which I think is the best way 😃). Something like craco-plugin-add-raw-loader with plugin options:

{
    test: "regex of file to handle"
}

How to a craco develop-a-plugin

Hope it helps!

Patrick