CODEWITHSUNDEEP
webpackbrowser-sync
Djave
Djave

Reputation: 9329

Webpack with browsersync is caching everything and not loading the new versions

I have an issue where all my assets (pages, js and css) are being cached and not refreshed when using browsersync.

I have a video here showing the issue

It seems that only a hard refresh fixes the problem.

I have my webpack config here:

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();
            }
          }
        }
      ]
    })
  ]
};

Its worth noting that browsersync doesn't even reload successfully with changes to a php file (i.e. relatively static files that don't need to be compiled). So I don't think it has anything to do with the file not being successfully compiled.

How can I see my changes as I make them by using browsersync with webpack?

Upvotes: 1

Views: 1670

Answers (1)

Dennis de Laat
Dennis de Laat

Reputation: 533

If you're using Chrome, open your dev tools F-12, go to settings F1 and check Disable cache (while DevTools is open) under the network section.

Upvotes: 2

Related Questions