Can I use require with webpack for external files?

Question

I want to import some static files that may not exist. I want to modify these external static files and to load them in my app, but Webpack gives 'module not found'

My folder structure looks like this in dev:

• src
  • static
    • config
      • cfg.json
      • folder1
        • file1.js
      • folder2
        • file2.js
  • component
    • Main.js

and in production webpack build everything and then it copies the static assets, making the folder structure like this:

• config (with the same files and folders inside, but they may get deleted or changed afterwards)
• app.js
• styles, etc.

What I want to do is to require from the Main.js, the files from the config folder in the static assets.

The static assets may, or may not exist. So what I tried was to put 'require' in a try/catch block, in this case if the required files are not found, then I use another flow in the catch.

I can use require with this path in Main.js ('../static/config/cfg.json'), but then, Webpack bundles all this, so if I modify the files in the config folder in production, the changes are not seen in the app.

In production and in development I can access the static files at http://localhost:3000/config/cfg.json or http://localhost:3000/config/folder1/file1.js

I can use fetch but I don't know how to read the variable that is exported default in file1.js, I can read only the entire file as a string using a FileReader.

And with fetch the code seems really messy. Is there any way to do this with require and choose the according path, without Webpack throwing 'module not found'?

Example code

try {
    let config = require('../static/config/cfg.json'); // if the cfg.json doesn't exist go straight to catch

    if (!config.active) {
        // throw error
    }

    // continue flow and read the js files
    // if the js files don't exist go straight to catch
}
catch(e => {
    // follow another flow
})

As I said, this code works, but if I modify anything in production in the static files, the changes are not seen, as Webpack requires the files that it bundled.

I expected to see the changes made to my external files, but instead Webpack requires the static files that it build.

Thank you in advance!

Edit: ---added webpack config entry ---

// ------------------------------------
// Entry Points
// ------------------------------------


// config.clientDir is the 'src' folder
// main.js is a file located in the 'src' folder, where React.DOM is called.
// so APP_ENTRY_PATH = 'src/main.js'

// config.compiler.publicPath = /app-name/ui // in this format...

const APP_ENTRY_PATH = paths.base(config.clientDir) + '/main.js';

webpackConfig.entry = {
  app: __DEV__ ?
    [APP_ENTRY_PATH, `webpack-hot-middleware/client?path=${config.compiler.publicPath}__webpack_hmr`] :
    [APP_ENTRY_PATH],
  vendor: config.compiler.vendor
};

Answer 1

Because I didn't find a way with webpack, I modified the files from JS extension to JSON and I used fetch to get the JSON data.

See this for more details:

HERE