webpack-dev-middleware: Webpack-Dev-Middleware errors for different Versions.

• Operating System: Windows 10
• Node Version: 8.7.0
• NPM Version: YARN 1.3.2
• webpack version: 4.5.0
• webpack-dev-middleware Version: 3.1.2

• This is a feature request
• This is a bug

Code

webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
     publicPath: '/'
  }
};

server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

Expected Behavior

Everything Loads Smoothly as expected in Webpack Development Guide

Actual Behavior

Cannot GET / Error > 3.1.2 MIME Error Refused to execute script from 'http://localhost:3000/app.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. < 3.0.1

For Bugs; How can we reproduce the behavior?

I followed Webpack Guide on Development (https://webpack.js.org/guides/development/). Anything Below Version 3.0.1 fails with MIME ERROR and anything Above fails with Cannot GET / Error