浏览器下载HTML内容而不是使用webpack-dev-server

Question

当我使用webpack-dev-server historyApiFallback将其索引替换为index.php而不是index.html时，浏览器特别是Chrome会下载其HTML内容而不是显示它。

如何解决此问题？

我的webpack.config.js位于下方。

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,
    }),

  ],
};

以下是curl命令

的结果

curl -I https://foobar.example.dev --insecure

HTTP/2 200
x-powered-by: Express
content-type: text/html; charset=utf-8
content-length: 9577