title: How to deploy a raw JSON file that Webpack 4 treats as a split module?
body: <p>I don't think this is an uncommon problem, but it seems like the keywords turn up many false positives. I've tried searching for "webpack dynamic configuration file", "webpack runtime load JSON file", and more. I see many results for configuring Webpack dynamically, but not many for configuring a bundled app dynamically.</p>
  
  <ul>
  <li><p>I want to have a configuration file that sits in my deployment as raw JSON, i.e. no Webpack runtime or module boilerplate. Just a valid JSON file.</p></li>
  <li><p>I want to "import" that JSON configuration in my code as I would as if it were a module, i.e. like this:</p>
  
  <pre><code>import config from './config.json'
  </code></pre></li>
  <li><p>I want Webpack to omit the JSON file from the bundle, but insert any necessary code to asynchronously request and inject the <code>config.json</code> waiting on the server.</p></li>
  <li><p>I want Webpack to ignore whether <code>./config.json</code> exists at build time, and to just optimistically assume it will be in the right place at runtime.</p></li>
  <li><p>I'd love if I could specify that <code>'./config.json'</code> is a module alias, and for Webpack to copy the aliased file to the correct location (with name <code>config.json</code>) in the build directory.</p></li>
  </ul>
  
  <p>This will give me a raw JSON file in my deployment that my site administrator can edit without running Webpack. It lets me as a developer code as if <code>config.json</code> is a regular module. How can I do this? I've seen suggestions to use</p>
  
  <pre><code>externals: {
    './config.json': "require('./config.prod.json')",
  },
  </code></pre>
  
  <p>but that won't work in the browser, where <code>require</code> does not exist.</p>
  
  <p>I've tried this configuration with no luck. The JSON is still inlined into the bundle:</p>
  
  <pre><code>resolve: {
    alias: {
      './config.json': path.resolve(__dirname, 'src/config.prod.json')
    }
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        config: {
          test: './config.json',
          chunks: 'all',
          name: 'config',
          priority: 100
        }
      }
    }
  }
  </code></pre>
  
  <p>I am using Webpack 4.</p>