<p dir="auto">Hi. I apologize if this was asked; I could not find duplicate(s).</p>
<p dir="auto">I basically have a hierarchical folder structure like a lot of people probably. The issue I'm having is that I'm getting errors like so: <code class="notranslate">ERROR in multi components Module not found: Error: Cannot resolve 'file' or 'directory'</code>. After delving deeper into the details it looks like <code class="notranslate">webpack</code> is looking for a <code class="notranslate">charting.js</code> or a <code class="notranslate">charting/index.js</code> kind of structure, but I basically want the folders to organize my files; not necessarily force what files should be in there as dictated by webpack.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="|-- node_modules
|-- public
  |-- components
    |-- charting
    |-- reporting
    ..."><pre class="notranslate"><code class="notranslate">|-- node_modules
|-- public
  |-- components
    |-- charting
    |-- reporting
    ...
</code></pre></div>
<p dir="auto">For example, another folder hierarchy is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="|-- public
  |-- components
    |-- routing
      |-- views
        |-- admin
          |-- App.jsx"><pre class="notranslate"><code class="notranslate">|-- public
  |-- components
    |-- routing
      |-- views
        |-- admin
          |-- App.jsx
</code></pre></div>
<p dir="auto">Webpack is requiring that I add an index.js or something like that to each nested folder, but that is something I want to avoid. Any ideas how I can improve this? Should I try and flatten? Thanks!</p>
<p dir="auto">My config:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var webpack = require('webpack');
var path = require('path');
var glob = require('glob');

var config = require('./gulp/config.js');

var rawScriptsPath = path.resolve(__dirname + '/' + config.path.publicBase + '/scripts');

module.exports = {
  context: rawScriptsPath,
  entry: {
    core: rawScriptsPath + '/core/application.js',
    components: glob.sync(rawScriptsPath + '/components/**/!(sf\.)*'),
    reporting: glob.sync(rawScriptsPath + '/reporting/**/!(\.clients)')
  },
  output: {
    path: path.resolve(__dirname, 'public/dist/scripts'),
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: [
      'node_modules',
      rawScriptsPath
    ],
    root: rawScriptsPath
  },
  module: {
    loaders: [      
      { 
        test: /\.js(x?)$/, 
        exclude: /node_modules/, 
        loader: 'babel', 
        query: { 
          stage: 0
          // presets: ['es2015', 'stage-0', 'react']
        } 
      },
      { 
        test: /\.css$/, 
        exclude: /node_modules/, 
        loaders: [
          'style',
          'css'
          // 'autoprefixer?browsers=last 3 versions',
          // 'sass?outputStyle=expanded'
        ]
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.IgnorePlugin(/\.svn$/)
  ]
};"><pre class="notranslate"><code class="notranslate">var webpack = require('webpack');
var path = require('path');
var glob = require('glob');

var config = require('./gulp/config.js');

var rawScriptsPath = path.resolve(__dirname + '/' + config.path.publicBase + '/scripts');

module.exports = {
  context: rawScriptsPath,
  entry: {
    core: rawScriptsPath + '/core/application.js',
    components: glob.sync(rawScriptsPath + '/components/**/!(sf\.)*'),
    reporting: glob.sync(rawScriptsPath + '/reporting/**/!(\.clients)')
  },
  output: {
    path: path.resolve(__dirname, 'public/dist/scripts'),
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: [
      'node_modules',
      rawScriptsPath
    ],
    root: rawScriptsPath
  },
  module: {
    loaders: [      
      { 
        test: /\.js(x?)$/, 
        exclude: /node_modules/, 
        loader: 'babel', 
        query: { 
          stage: 0
          // presets: ['es2015', 'stage-0', 'react']
        } 
      },
      { 
        test: /\.css$/, 
        exclude: /node_modules/, 
        loaders: [
          'style',
          'css'
          // 'autoprefixer?browsers=last 3 versions',
          // 'sass?outputStyle=expanded'
        ]
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.IgnorePlugin(/\.svn$/)
  ]
};
</code></pre></div>
<h2 dir="auto">Feature request</h2>





<p dir="auto"><strong>What is the expected behavior?</strong><br>
Loading chunks with <code class="notranslate">import()</code></p>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong><br>
Imports are much cleaner than jsonp and in the future more and more browsers and platforms are going to support it, making a unified approach</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong><br>
Just use <code class="notranslate">import()</code> to load the chunk</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong><br>
Depending on how easy it is and with some help</p>