title: Webpack - module not found even though module exists
body: <p><a href="https://stackoverflow.com/questions/46836804/how-to-import-components-using-webpack">This is a branch off of my previous question and applied suggestions</a>. But I am still having major issues. </p>
  
  <p>I now have my babel transpiler, along with a <code>.babelrc</code> file in place. My import code to import my module looks like this:</p>
  
  <pre><code>var init = require('./app/js/modules/toc');
  init();
  </code></pre>
  
  <p>However I'm getting this:</p>
  
  <pre><code>ERROR in ./app/js/script.js
  Module not found: Error: Cannot resolve 'file' or 'directory' ./app/js/modules/toc in /projects/project-root/app/js
   @ ./app/js/script.js 1:11-42
  </code></pre>
  
  <p>Webpack config:</p>
  
  <pre><code>var debug = process.env.NODE_ENV !== "production";
  var webpack = require('webpack');
  
  module.exports = {
    context: __dirname,
    devtool: debug ? "inline-sourcemap" : null,
    entry: "./app/js/script.js",
    module: {
    rules: [{
        test: /\.js$/,
        use: 'babel-loader'
      }]
    },
    output: {
      path: __dirname + "public/javascripts",
      filename: "scripts.min.js"
    },
    plugins: debug ? [] : [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
  };
  </code></pre>
  
  <p>.babelrc</p>
  
  <pre><code>{
    "presets": ["es2015"]
  }
  </code></pre>
  
  <p>Gulptask</p>
  
  <pre><code>//scripts task, also "Uglifies" JS
  gulp.task('scripts', function() {
      gulp.src('app/js/script.js')
      .pipe(webpack(require('./webpack.config.js')))
      .pipe(gulp.dest('public/javascripts'))
      .pipe(livereload());
  });
  </code></pre>
  
  <p>I'm totally lost...what am I doing wrong?</p>
  
  <p>For my import code I also tried:</p>
  
  <pre><code>import {toc} from './modules/toc'
  toc();
  </code></pre>
  
  <p>UPDATE: As recommended I needed to add resolve to my config. It looks like this now:</p>
  
  <pre><code>var debug = process.env.NODE_ENV !== "production";
  var webpack = require('webpack');
  
  module.exports = {
    context: __dirname,
    devtool: debug ? "inline-sourcemap" : null,
    entry: "./app/js/script.js",
    resolve: {
      extensions: ['.js']
    },
    module: {
    rules: [{
        test: /\.js$/,
        use: 'babel-loader'
      }]
    },
    output: {
      path: __dirname + "public/javascripts",
      filename: "scripts.min.js"
    },
    plugins: debug ? [] : [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
  };
  </code></pre>
  
  <p>Sadly I still get:</p>
  
  <blockquote>
    <p>ERROR in Entry module not found: Error: Cannot resolve 'file' or
    'directory' ./app/js/script.js in /projects/project-root</p>
  </blockquote>
  
  <p>Does my file structure need to change?</p>