具有browsersync的Webpack会缓存所有内容，而不会加载新版本

Question

我遇到一个问题，使用浏览器同步时，我的所有资产（页面，js和css）都被缓存并且没有刷新。

I have a video here showing the issue

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

我在这里有我的webpack配置：

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文件（即不需要编译的相对静态文件）成功重新加载。所以我认为这与文件未成功编译无关。

在将浏览器同步与webpack一起使用时，如何查看所做的更改？

Answer 1

如果您使用的是Chrome，请打开开发工具 F-12 ，转到设置 F1 ，然后在网络部分下选中Disable cache (while DevTools is open)。