title: Can webpack handle require() correctly?
body: <p>I understand that Webpack allows users to import and export modules using es6 module syntax, AMD or commonJS. However, when working on a webpack project, a simple require statement is raising errors.</p>
  
  <p>This is in the context of a freshly created "create-react-app" project.</p>
  
  <h1>config.js</h1>
  
  <pre><code>const packageJson = require('../package.json');
  
  const baseConfig = {
      urls: {
          base: packageJson.homepage,
          engineServer: 'localhost:3001'
      },
      useArrowKeysToCycleViews: false
  };
  
  const debugStyleConfig = {
      ...baseConfig,
      useArrowKeysToCycleViews: true
  };
  
  module.exports = { // &lt;-- IMPORTANT
      config: debugStyleConfig
  };
  </code></pre>
  
  <h1>index.js</h1>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App/App';
  import * as serviceWorker from './serviceWorker';
  import './boot'; // &lt;-- IMPORTANT
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  serviceWorker.unregister();
  </code></pre>
  
  <h1>boot.js</h1>
  
  <pre><code>// The following line...
  import { config } from './config';
  // ... raises this error:
  // Attempted import error: 'config' is not exported from './config'.
  
  // If the following line is used instead...
  // const { config } = require('./config');
  // ...a different error is raised:
  // TypeError: Cannot assign to read only property 'exports' of object '#&lt;Object&gt;'
  </code></pre>
  
  <p>In trying to understand the issue, I created a second project that makes use of <code>module.exports</code> and <code>require</code>. However, strangely, the following works perfectly.</p>
  
  <h1>foo.js</h1>
  
  <pre><code>function foo() {
      return 'fooz';
  }
  
  function bar() {
      return 'bar';
  }
  
  module.exports = {
      foo, bar
  };
  </code></pre>
  
  <h1>App.js</h1>
  
  <pre><code>import React from 'react';
  import './App.css';
  const { foo, bar } = require('./foo');
  
  function App() {
    return (
      &lt;div className="App"&gt;
          &lt;h1&gt;{foo()}&lt;/h1&gt;
          &lt;h1&gt;{bar()}&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>Is there a nuance to using <code>require</code> and <code>module.exports</code> with webpack that is not entirely forthcoming?</p>