Webpack 2 setup with NodeJs and JQuery

Guys i need help getting webpack 2 working the way i want it. basically i need to use webpack 2 with nodejs and jquery.

my file structure is a is

  --root
   |--models  
   |--public    
   |--css    
   |  --img    
   |  --js   
   |    --login.js
   |--routes    
   |   -index.js    
   |   -users.js  
   |--src    
   |   -js
   |    -core    
   |    -vendor      
   |    -views
   |       -login.js  
   |--views    
   |  -layouts    
   |  -partials    
   |  -login.hbs
   |--app.js
   |--package.json
   |--webpack.config.js

and in my webpack.config.js

var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
//var host = (process.env.HOST || 'localhost');
//var port = parseInt(process.env.PORT) + 1 || 3001;


module.exports = {
  context: __dirname,

  entry: {
    login:'./src/js/views/login.js',
    vendor: ['sweetalert2', 'select2']
  },

  output: {
    path: path.join(__dirname, 'public/js'),
    filename: '[name].js',
    chunkFilename: '[name].[chunkhash].js',
  },

  target: 'web',
   externals: [nodeExternals({
     whitelist: ['sweetalert2', 'select2']
   })],

  resolve: {
    modules: ['node_modules'],
    alias: {
      corejs: path.join(__dirname, 'src/js/core'),
      vendorjs: path.join(__dirname, 'src/js/vendor'),
      viewjs: path.join(__dirname, 'src/js/views')
    },
    extensions: ['.js']
  },
  module :{
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|routes|src)/,
        use: [ 'script-loader' ]
        // use: {
        //   loader: 'babel-loader',
        //   options: {
        //     presets: ['es2015', { loose: true, modules: false }]
        //   }
        // }
      }
    ]
  },
  plugins: [
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'vendor',
    //   filename: 'vendor-[hash].min.js',
    // }),
    // new webpack.optimize.CommonsChunkPlugin({
    //     names: ['vendor', 'manifest'] // Specify the common bundle's name.
    // }),
    // new webpack.ProvidePlugin({
    //   debug: true,
    //   $: "jquery",
    //   jQuery: "jquery",
    //   "window.jQuery": "jquery"
    // })
  ]
}

and in my app.js is a regular nodeJS file

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

app.listen(3000, () => {
  console.log('Started up at port 3000');
});

module.exports = app;

my source login js that i want to bundle from "./src/js/views/login.js" goes like this

import 'vendorjs/select2/js/select2.full.min.js';

    $(document).ready(function () {

        var $styleClass = $('.styled'),
            $bodyClass = $('body'),
            $genderSelect = $('#genderSelect'),
            $acctSelect = $('#accountSelect'),

        //select options
        $genderSelect.select2({
            minimumResultsForSearch: Infinity
        });

        $acctSelect.select2({
            minimumResultsForSearch: Infinity
        });
    });

now i want webpack to bundle just the jquery plugin with the view code into the folder of the webpack output without adding all the require call into the code. with all the iteration i try i always get an error in the browser "require is not a function or is not defined", "exports is not a function or is not defined" and so on.

can a configuration guru out there help to get me on the right track.

much appreciated for your help

via boulepick