Webpack:publicPath导致/src和/dist文件出现问题

当我运行webpack dev server时,publicPath为 /距离 ,我可以看到我的应用程序的实时编辑(对html、样式、js的更改)。但是,当我将应用程序编译成生产版本时,样式表和javascript从/dist/main.css和/dist/main.js加载,而不是从main.css和main.js加载

问题似乎出在公共路径设置上。如果删除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
}