Webpack not making JS modules

Question

I want to make vanilla js/bootstrap website and I am using webpack. I have been following various instructions and tutorials but they do not seem to work.

Here is my webpack.config.js:

const path = require('path')

module.exports = {
  entry: {
    auth: [
      path.resolve(__dirname, 'src/js/auth.js'),
      path.resolve(__dirname, 'src/js/msal-2.28.1.js')
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  entry: {
    main: [
      path.resolve(__dirname, 'src/js/index.js'),
      path.resolve(__dirname, 'src/js/api.js')
    ]
  },
  output: {  
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 3000,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

But the error I get when I run webpack is:

Module not found: Error: Can't resolve 'auth' in '/Users/me/Projects/AProject/src/js'
Did you mean './auth'?

All of the .js files exist where they should:

Image of JS files in correct folder structure

So I am at a loss as to what is going on. If I remove the second entry point (main) it builds fine no errors.

I have treid following every single tutorial and guide I can find and it just doesn't work.

Answer 1

Thanks to @Juho Vepsäläinen

There were two errors occuring:

1. I had an import for auth.js in api.js
2. I have multiple entry: points and apparently JS will only use the last one.

Here is working config:

const path = require('path')

module.exports = {
  entry: {
    auth: [
      path.resolve(__dirname, 'src/js/auth.js'),
      path.resolve(__dirname, 'src/js/msal-2.28.1.js')
    ],
    main: [
      path.resolve(__dirname, 'src/js/index.js'),
      path.resolve(__dirname, 'src/js/api.js')
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 3000,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}