title: Module not found: Error: Can't resolve './src' in custom wordpress theme
body: <p>I have tried running &quot;npm run dev&quot; using the webpack.config below and I keep getting the error ERROR in Entry module not found: Error: Can't resolve './src' in. After searching stack overflow for a few house, I have tried a number of potential solutions to rectify the issue however all attempts have failed. By running the dev, I should get a build folder with all the relevant files, but what I am getting is the error and an empty dist folder. Below is the webpack configuration file</p>
  <pre><code>/**
   * Webpack configuration.
   */
  
  const path = require( 'path' );
  const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
  const OptimizeCssAssetsPlugin = require( 'optimize-css-assets-webpack-plugin' );
  const cssnano = require( 'cssnano' ); // https://cssnano.co/
  const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
  const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin' );
  const CopyPlugin = require('copy-webpack-plugin'); // https://webpack.js.org/plugins/copy-webpack-plugin/
  const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
  
  // JS Directory path.
  const JS_DIR = path.resolve( __dirname, 'src/js' );
  const IMG_DIR = path.resolve( __dirname, 'src/img' );
  const BUILD_DIR = path.resolve( __dirname, 'build' );
  
  const entry = {
      main: JS_DIR + '/main.js',
      single: JS_DIR + '/single.js',
  };
  
  const output = {
      path: BUILD_DIR,
      filename: 'js/[name].js'
  };
  
  /**
   * Note: argv.mode will return 'development' or 'production'.
   */
  const plugins = ( argv ) =&gt; [
      new CleanWebpackPlugin( {
          cleanStaleWebpackAssets: ( 'production' === argv.mode  ) // Automatically remove all unused webpack assets on rebuild, when set to true in production. ( https://www.npmjs.com/package/clean-webpack-plugin#options-and-defaults-optional )
      } ),
  
      new MiniCssExtractPlugin( {
          filename: 'css/[name].css'
      } ),
  
      new CopyPlugin( {
          patterns: [
              { from: LIB_DIR, to: BUILD_DIR + '/library' }
          ]
      } ),
  
      new DependencyExtractionWebpackPlugin( {
          injectPolyfill: true,
          combineAssets: true,
      } )
  ];
  
  const rules = [
      {
          test: /\.js$/,
          include: [ JS_DIR ],
          exclude: /node_modules/,
          use: 'babel-loader'
      },
      {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              'sass-loader',
          ]
      },
      {
          test: /\.(png|jpg|svg|jpeg|gif|ico)$/,
          use: {
              loader: 'file-loader',
              options: {
                  name: '[path][name].[ext]',
                  publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
              }
          }
      },
      {
          test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
          exclude: [ IMG_DIR, /node_modules/ ],
          use: {
              loader: 'file-loader',
              options: {
                  name: '[path][name].[ext]',
                  publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
              }
          }
      }
  ];
  
  /**
   * Since you may have to disambiguate in your webpack.config.js between development and production builds,
   * you can export a function from your webpack configuration instead of exporting an object
   *
   * @param {string} env environment ( See the environment options CLI documentation for syntax examples. https://webpack.js.org/api/cli/#environment-options )
   * @param argv options map ( This describes the options passed to webpack, with keys such as output-filename and optimize-minimize )
   * @return {{output: *, devtool: string, entry: *, optimization: {minimizer: [*, *]}, plugins: *, module: {rules: *}, externals: {jquery: string}}}
   *
   * @see https://webpack.js.org/configuration/configuration-types/#exporting-a-function
   */
  module.exports = ( env, argv ) =&gt; ({
  
      entry: entry,
  
      output: output,
  
      /**
       * A full SourceMap is emitted as a separate file ( e.g.  main.js.map )
       * It adds a reference comment to the bundle so development tools know where to find it.
       * set this to false if you don't need it
       */
      devtool: 'source-map',
  
      module: {
          rules: rules,
      },
  
      optimization: {
          minimizer: [
              new OptimizeCssAssetsPlugin( {
                  cssProcessor: cssnano
              } ),
  
              new UglifyJsPlugin( {
                  cache: false,
                  parallel: true,
                  sourceMap: false
              } )
          ]
      },
  
      plugins: plugins( argv ),
  
      externals: {
          jquery: 'jQuery'
      }
  });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/MJFuv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MJFuv.jpg" alt="File Structure" /></a></p>
  <pre><code> &quot;scripts&quot;: {
      &quot;webpack&quot;: &quot;webpack&quot;,
      &quot;prod&quot;: &quot;cross-env NODE_ENV=production webpack --mode production --progress&quot;,
      &quot;dev&quot;: &quot;cross-env NODE_ENV=development webpack --watch --mode development --progress&quot;,
      &quot;clean&quot;: &quot;rm -rf build/*&quot;
  </code></pre>