重新加载后，Webpack 4 开发服务器未加载脚本

Question

当我使用 webpack serve 运行我的应用程序时，它启动并运行良好。但是，当我进行任何更改并保存时，它会编译并重新加载，但屏幕上什么也没有，而且我注意到所有指向包文件的 <script> 标记都从生成的 index.html 中消失了。我的 webpack.config.js 看起来像：

config.devServer = {
    contentBase: path.join(__dirname, 'build', 'jar', 'frontend-resources'), // This is the same as config.output.path
    port: 8081,
    hot: true, // Also tried to set this to false, doesn't work either way.
    proxy: {
        '*': 'http://localhost:8080',
    }
};

当我运行服务器时，我在控制台中看到：

i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from undefined
i ｢wds｣: Content not from webpack is served from C:\Users\FOO BAR\Documents\dev\app\frontend\build\jar\frontend-resources

我确实收到了关于包大小的警告，但我认为它不应该中断重新加载？我正在使用 webpack 4.44.0 和 webpack-dev-server 3.11.0

编辑

这是请求的完整 webpack 配置。由于我之前从未配置过 webpack，所以它可能非常臃肿，所以我在 GitHub 上找到的一些配置模板之上构建：

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
const path = require("path");

const ENV = process.env.npm_lifecycle_event;
const isTest = ENV === 'test' || ENV === 'test-watch';
const isProd = ENV === 'build';
const appPath = '/build/jar/frontend-resources';

module.exports = function makeWebpackConfig() {
  const config = {};

  config.resolve = {
    extensions: ['.tsx', '.ts', '.js'],
  };

  config.entry = isTest ? void 0 : [
    'webpack-dev-server/client?http://localhost:8081',
    'webpack/hot/dev-server',
    './src/main/app.ts',
  ];


  config.output = isTest ? {} : {
    path: __dirname + appPath,
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[name].js'
  };

  if (isTest) {
    config.devtool = 'inline-source-map';
  }
  else if (isProd) {
    config.devtool = 'source-map';
  }
  else {
    config.devtool = 'eval-source-map';
  }

  config.module = {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          !isProd ? 'style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { url: false, sourceMap: true } },
          'postcss-loader',
          'sass-loader',
        ],
      }, {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
        loader: 'file-loader'
      }, {
        test: /\.html$/,
        loader: 'html-loader',
      }]
  };

  if (isTest) {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.js$/,
      exclude: [
        /node_modules/,
        /\.spec\.js$/
      ],
      loader: 'istanbul-instrumenter-loader',
      query: {
        esModules: true
      }
    })
  }

  config.optimization = {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      },
    },
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
        test: /\.js(\?.*)?$/i,
      }),
    ],
  };

  config.plugins = [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin(),

    new webpack.LoaderOptionsPlugin({
      test: /\.css$/i,
      options: {
        postcss: {
          plugins: [autoprefixer]
        }
      }
    })
  ];

  // Skip rendering index.html in test mode
  if (!isTest) {
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          { from: './src/assets' },
          { from: './src/imgsrc' },
        ]
      }),
      new HtmlWebpackPlugin({
        template: './src/assets/index.html',
        inject: 'body'
      }),
      new SVGSpritemapPlugin('./src/svgsrc/*.svg', {
        output: {
          filename: 'svg-bundle.svg',
        },
        sprite: {
          prefix: false,
          generate: {
            symbol: true,
          }
        }
      })
    )
  }

  config.devServer = {
    contentBase: path.join(__dirname, 'build', 'jar', 'frontend-resources'),
    publicPath: config.output.publicPath,
    stats: 'minimal',
    port: 8081,
    hot: true,
    inline: true,
    proxy: {
      '*': 'http://localhost:8080',
    }
  };

  return config;
}();