Browser downloads the HTML contents instead of showing it with webpack-dev-server - reactjs

Question

When I use webpack-dev-server with historyApiFallback replacing its index with index.php instead of index.html, A browser specifically Chrome will download its HTML contents instead of showing it.
How can I fix this issue?
My webpack.config.js is below.
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const entries = [
'./src/index.js',
];
module.exports = {
stats: {
assets: false,
colors: true,
version: false,
hash: true,
timings: true,
chunks: true,
chunkModules: true,
},
entry: entries,
output: {
path: path.resolve(__dirname, 'dist', 'assets'),
filename: '[name].js',
},
devtool: 'source-map',
devServer: {
port: 8000,
host: 'foobar.example.dev',
historyApiFallback: {
index: 'index.php',
},
noInfo: false,
stats: 'minimal',
contentBase: 'src',
hot: true,
inline: true,
https: true,
open: false,
cert: fs.readFileSync(path.resolve(__dirname, '..', 'shared', 'certs', 'foobar.example.dev.crt')),
key: fs.readFileSync(path.resolve(__dirname, '..', 'shared', 'certs', 'foobar.example.dev.key')),
proxy: {
'/wp-json/*': {
target: 'https://foobar.example.dev/wp-json',
port: 443,
secure: false,
changeOrigin: true,
},
},
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js?$/,
loader: 'eslint-loader',
options: {
configFile: '.eslintrc',
},
exclude: /(node_modules)/,
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'postcss-loader',
'sass-loader',
],
}),
},
{
test: /\.(js|jsx)$/,
loaders: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-1', 'react', 'react-hmre'],
},
},
// Images
// First use Base64 Encoded images if it is smaller than 10kb
// Otherwise use hashed images and optimize the image
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'url-loader?limit=10000&name=images/[name].[hash].[ext]',
],
},
// Fonts
{
test: /\.(eot|ttf|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]',
},
],
},
resolve: {
extensions: ['.js', '.scss', '.css'],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new StyleLintPlugin({
configFile: '.stylelintrc',
context: './src/styles',
files: '**/*.scss',
}),
new webpack.ProvidePlugin({
"React": "react",
}),
new ExtractTextPlugin({
filename: '/assets/main.css',
disable: process.env.NODE_ENV !== 'production',
allChunks: true,
}),
],
};
Here is the result of curl command
curl -I https://foobar.example.dev --insecure
HTTP/2 200
x-powered-by: Express
content-type: text/html; charset=utf-8
content-length: 9577