带有browsersync的Webpack正在缓存所有内容,而不是加载新版本

带有browsersync的Webpack正在缓存所有内容,而不是加载新版本,webpack,browser-sync,Webpack,Browser Sync,我有一个问题,在使用browsersync时,我的所有资产(页面、js和css)都被缓存而没有刷新 似乎只有硬刷新才能解决问题 我在这里有我的网页配置: const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const BrowserSyncPlugin = require("browser-sync-webpa

我有一个问题,在使用browsersync时,我的所有资产(页面、js和css)都被缓存而没有刷新

似乎只有硬刷新才能解决问题

我在这里有我的网页配置:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
var ManifestPlugin = require("webpack-manifest-plugin");

module.exports = {
  // Get everything from this file
  entry: "./assets/app.js",
  // Watch the files, so if anything changes, recompile
  watch: true,
  // Put the JavaScript file here
  output: {
    filename: "[name].[chunkhash].js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: { minimize: true }
          },
          {
            loader: "postcss-loader", // Run post css actions
            options: {
              plugins: function() {
                // post css plugins, can be exported to postcss.config.js
                return [require("precss"), require("autoprefixer")];
              }
            }
          },
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new ManifestPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "style.[contentHash].css",
      chunkFilename: "[id].css"
    }),
    new BrowserSyncPlugin({
      // browse to http://localhost:3000/ during development,
      // ./public directory is being served
      host: "localhost",
      port: 3000,
      proxy: "http://kinship.eightarms/",
      reloadDelay: 500,
      files: [
        {
          match: ["**/*.php", "**/*.css", "**/*.js"],
          fn: function(event, file) {
            if (event === "change") {
              const bs = require("browser-sync").get("bs-webpack-plugin");
              bs.reload();
            }
          }
        }
      ]
    })
  ]
};
值得注意的是,对php文件(即不需要编译的相对静态文件)进行更改后,browsersync甚至无法成功重新加载。所以我不认为这与文件没有被成功编译有任何关系


如何在使用browsersync with webpack进行更改时查看更改?

如果使用Chrome,请打开开发工具F-12,转到设置F1并选中网络部分下的禁用缓存(当DevTools打开时)