I have a bunch of files which I want to load into reactjs at compile time to avoid a bunch of fetch requests. The overall program requires a lot of files to be loaded at run time and I want to shrink this time considerably by have them already loaded and only download the one which I don’t have.

here is a list

article.cls                      pgfkeysfiltered.code.tex
chemfig.sty                      pgfkeys.sty
chemfig.tex                      pgflibraryarrows.meta.code.tex
ckx.map                          pgflibraryplothandlers.code.tex
cmr10                            pgfmathcalc.code.tex
cmr10.pfb                        pgfmath.code.tex

Here is just some code example.

import React, { useState, useEffect } from 'react';
import './App.css';

files = []

const siftThroughFiles = (fileList) =>{
    for (file in fileList)
        if (file == filelist[file])
            return file
        else
        downloadFile()
}


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello World</h1>
      </header>
    </div>
  );
}

export default App;

I read somewhere that I should use a raw-loader.

module.exports = override(
  addWebpackModuleRule({
    test: /.(txt|tex)$/,
    use: 'raw-loader'
  })
);