title: Can I use require with webpack for external files?
body: <p>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'</p>
  
  <p>My folder structure looks like this in dev:</p>
  
  <ul>
  <li>src
  
  <ul>
  <li>static
  
  <ul>
  <li>config
  
  <ul>
  <li>cfg.json</li>
  <li>folder1
  
  <ul>
  <li>file1.js</li>
  </ul></li>
  <li>folder2
  
  <ul>
  <li>file2.js</li>
  </ul></li>
  </ul></li>
  </ul></li>
  <li>component
  
  <ul>
  <li>Main.js</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>and in production webpack build everything and then it copies the static assets, making the folder structure like this:</p>
  
  <ul>
  <li>config (with the same files and folders inside, but they may get deleted or changed afterwards)</li>
  <li>app.js</li>
  <li>styles, etc.</li>
  </ul>
  
  <p>What I want to do is to require from the Main.js, the files from the config folder in the static assets.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>In production and in development I can access the static files at <a href="http://localhost:3000/config/cfg.json" rel="nofollow noreferrer">http://localhost:3000/config/cfg.json</a> or <a href="http://localhost:3000/config/folder1/file1.js" rel="nofollow noreferrer">http://localhost:3000/config/folder1/file1.js</a></p>
  
  <p>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.</p>
  
  <p>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'?</p>
  
  <p>Example code</p>
  
  <pre><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 =&gt; {
      // follow another flow
  })
  </code></pre>
  
  <p>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.</p>
  
  <p>I expected to see the changes made to my external files, but instead Webpack requires the static files that it build.</p>
  
  <p>Thank you in advance!</p>
  
  <p>Edit: ---added webpack config entry ---</p>
  
  <pre><code>// ------------------------------------
  // 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
  };
  </code></pre>