Migrating from Grunt+Bower to Webpack

Question

I am trying to migrate away from Bower+Grunt to Webpack (and eventually to YARN instead of Bower).

However, any documentation I have come across for WebPack3 doesn't even talk about handling bower components.

WebPack 2 used a plugin for Bower, however the same isn't supported for WebPack 3.

Here's my WebPack config:

const webpack = require('webpack');
const path = require('path');

const frontEndConfig = {
  entry: {
    client: './client/app/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist/client/'),
    filename: '[name].app.js'
  },
  module:  {
    loaders: [
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader"
      }
    ]
  },
  resolve: {
  modules: ['bower_components'],
  descriptionFiles: ['bower.json'],
  }
};

const backEndConfig = {
  entry: {
    client: './server/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist/server/'),
    filename: 'app.js'
  },
  module:  {
    loaders: [
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader"
      }
    ],
    rules: [{
      exclude: ['node_modules']
    }]
  },
  resolve: {
  modules: ['node_modules'],
  descriptionFiles: ['package.json'],
  }
};



module.exports = [
    frontEndConfig,
    backEndConfig
];;

The whole idea is to first run using webpack and then move completely to YARN.

They say plugins have been stopped for WebPack3, so what's the workaround for this?