npm run dev не будет автоматически обновляться sh с последними изменениями

Question

У меня есть приложение vue. js, которое не обновляет автоматически sh при запуске npm run dev - приложение обновляется только при запуске npm run build.

Приложение запускается, когда я запускаю npm run dev, но в нем просто нет последних изменений, пока я не сделаю сборку.

Я подумал, что это могло быть связано с тем, что моя база данных просматривала мою папку dist, но если я изменю это или установлю значение false, приложение вообще не будет работать в режиме разработки. Я получаю белую страницу с надписью «Cannot GET /»

. Я пытался использовать BrowserSyncPlugin для выполнения этой работы, но это все еще не обновляет страницу с моими последними изменениями.

Но я просто хочу иметь возможность запускать свое приложение в режиме разработки и автоматически видеть последние изменения.

• Операционная система:
• Версия узла: 10.13. 0
• Версия webpack: 4.41.2
• Версия webpack-dev-server: 3.11.0

Вот мой webpack.config.dev:

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

module.exports = merge(baseConfig, {
  mode: 'development',

  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    contentBase: 'dist',
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: { warnings: false, errors: true },
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true,  // necessary for FriendlyErrorsPlugin
    hot: true,
    inline: true,
    watchContentBase: true
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                importer: nodeSassMagicImporter()
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../dist'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ]),
    new FriendlyErrorsPlugin(),
    new BrowserSyncPlugin({
        host: 'localhost',
        port: config.dev.port,
        proxy: 'http://localhost:8080/',
        open: 'external'
      },
      {
        reload: false
      })
  ],
  performance: {hints: false},
  optimization: {splitChunks: {chunks: 'all'}}
})

Вот мой webpack.config.dev:

  module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json', '.scss'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    setImmediate: false,

    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

Вот мой dev внутри индекса. js:

    dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    host: process.env.YOUR_HOST || 'localhost', 
    port: process.env.PORT || 8080,
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
    useEslint: true,

    showEslintErrorsInOverlay: false,

    devtool: 'cheap-module-eval-source-map',

    cacheBusting: true,

    cssSourceMap: true
  },

Вот мой пакет. json:

 "scripts": {
    "dev": "webpack-dev-server --inline --history-api-fallback --progress --config 
     build/webpack.dev.conf.js",
    "run": "npm run dev",
    "build": "node build/build.js"
 }