Webpack刷新后从publicPath根URL到子URL提供不同的文件

Question

当我运行webpack-dev-server并在浏览器中导航到它时，一切都很好。如果我通过点击/链接导航到子页面，一切都很好。但是，如果我随后单击刷新，则该应用程序直接加载了子网址，它似乎没有执行我的角度应用程序并加载了页面。唯一呈现的是index.html文件中的硬编码HTML元素。

我还注意到，当我从根URL加载页面时，它会将文件加载到内存之外，但是当我加载子URL时，它似乎正在从dist目录中加载文件，我认为这是其中的一部分。问题。我可以通过直接修改dist目录中的HTML文件来确认这一点。当我这样做时，只有在加载页面无法正确加载的子URL时，我才会看到我的更改。

const path = require('path');
const webpack = require('webpack');
const getDefaultLoaders = require('./loaders.webpack.js');
var HtmlWebpackPlugin = require('html-webpack-plugin');

/**
 * Env
 * Get npm lifecycle event to identify the environment
 */
var ENV = process.env.npm_lifecycle_event || [];
var isTest = (ENV.indexOf('test') > -1); // lifecycle event contains 'test'
var isBuild = (ENV.indexOf('build') > -1); // lifecycle event contains 'build'


/**############ SOURCEMAPS AND UGLIFICATION SETUP #############**/
var config = {
  sourcemaps: !isBuild, // sourcemaps default to false when building, default to true o/w
  uglify: isBuild // uglify default to true when building, default to false o/w
};
/** Overrite with environment config  **/
readConfigFromEnv('sourcemaps', process.env.SOURCEMAPS);
readConfigFromEnv('uglify', process.env.UGLIFY);

function readConfigFromEnv(configName, envValue) {
  if (envValue !== undefined) {
    config[configName] = !!envValue;
  }
}

function getSourcemapOption() {
    return 'source-map';
}

module.exports = function(options) {


  var htmlWebpackPluginObj = options.htmlWebpackPluginObj || {};
  htmlWebpackPluginObj = Object.assign({
    title: options.HTMLPageTitle || 'MyApp',
    template: path.resolve(options.baseDir + '/app/index.ejs'),
    publicPath: options.publicPath,
    sourcemapsEnabled: config.sourcemaps,
    uglifyEnabled: config.uglify,
    packageJSONDeps: JSON.stringify(require(path.resolve(options.baseDir + '/package.json')).dependencies),
    versionUIScaffolding: getVersionForDependency(options, 'ui-scaffolding'),
    versionWorkbenchComponents: getVersionForDependency(options, 'workbench-components'),
    googleAnalyticsTag: getGoogleAnalyticsID(),
    versionBootstrap: getVersionForDependency(options, 'bootstrap'),
  }, htmlWebpackPluginObj);
  console.log('################## config', config);
  const defaultLoaders = getDefaultLoaders(config);

  console.log('########################### What mode are we using?', isBuild ? 'production' : 'development');

  function getPlugins() {
    const plugins = [];
    if (isTest) {
      return plugins;
    }

    plugins.push(
      new HtmlWebpackPlugin(htmlWebpackPluginObj)
    );

    return plugins;
  }

  return {
    mode: isBuild ? 'production' : 'development', // "production" | "development" | "none"
    // Chosen mode tells webpack to use its built-in optimizations accordingly.
    // entry: './app/app.js', // string | object | array  // defaults to ./src
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    },
    context: options.baseDir + '/app', // string (absolute path!)
    // the home directory for webpack
    // the entry and module.rules.loader option
    //   is resolved relative to this directory
    entry: {
      app: ['./app.js'],
      styles: './app.less'
    },  // Here the application starts executing
    // and webpack starts bundling
    output: isTest ? {} : {
      devtoolLineToLine: true,
      // options related to how webpack emits results
      path: path.resolve(__dirname, 'dist'), // string
      // the target directory for all output files
      // must be an absolute path (use the Node.js path module)
      filename: '[name].bundle.js', // string    // the filename template for entry chunks
      // filename: '[name].bundle.js', // string    // the filename template for entry chunks
      // sourceMapFilename: '[name].bundle.map',
      publicPath: '/contract-performance/', // string   // the url to the output directory resolved relative to the HTML page
      // publicPath: '/contract-performance/',
      library: 'contract-performance', // string,
      // the name of the exported library
      libraryTarget: 'umd', // universal module definition    // the type of the exported library
      /* Advanced output configuration (click to show) */
    },
    devServer: {
      // contentBase: './dist', // When commented out "Cannot GET /contract-performance/contracts"
      hot: false,
      historyApiFallback: true,
      publicPath: '/contract-performance/',
      // public: 'localhost/contract-performance/', Causes all kinds of issues in the log

      // publicPath: '/contract-performance/',
      // contentBase: './dist'
      // contentBase: path.join(__dirname, 'dist'),
      // publicPath: '/contract-performance/',
    },
    devtool: 'source-map', // enum  // enhance debugging by adding meta info for the browser devtools
    // source-map most detailed at the expense of build speed.
    target: 'web', // enum  // the environment in which the bundle should run
    plugins: getPlugins(),
    module: {
      rules: []
      .concat(defaultLoaders)
    },
  };
}