Webpack：由于publicPath，/ src和/ dist文件存在问题

Question

当我运行带有 / dist 的publicPath的webpack-dev-server时，可以看到我的应用程序的实时编辑（更改为html，style，js）。但是，当我将应用程序编译到生产版本中时，样式表和javascript将从/dist/main.css和/dist/main.js加载，而不是从main.css和main.js

加载

问题似乎出在publicPath设置上。如果删除publicPath，则该应用程序将使用main.css和main.js进行编译，但看不到实时编辑。但是，如果保留 publicPath：/ dist ，我可以看到实时编辑，但是现在我得到 /dist/main.css和/dist/main.js

const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/js/app.js',
  output: {
    filename: 'main.bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist'
  }, //js output object
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }, //sass to css
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env']
            }
          }
        ]
      } //babel
    ]
  }, //module object
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].min.css',
      chunkFilename: '[id].min.css'
    }),
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      proxy: 'http://localhost:8080/dist'
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
     /* minify: {
        collapseWhitespace: true
      }*/
    }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', {discardComments: {removeAll: true}}]
      },
      canPrint: true
    })
  ] //plugins array
}