Compile loop when using webpack watch

[andershagbard]

I have an issue, where the additional CSS files, keeps compiling when using the watch command, even without change. Everything works as expected in normal compile mode, and in serve mode.

It is a bit shortened, but should have all relevant plugins etc.

I have the following webpack config:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MediaQueryPlugin = require('media-query-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const resolveConfig = require('tailwindcss/resolveConfig');

const tailwind = resolveConfig(require('./tailwind.config'));

module.exports = {
  devtool: process.env.NODE_ENV === 'development' ? 'inline-source-map' : false,

  target: 'web',

  entry: app: {
    import: path.join(__dirname, 'resources/app.js'),
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
    new MediaQueryPlugin({
      include: [
        'app',
      ],
      queries: (() => {
        const keys = Object.keys(tailwind.theme.screens);
        const values = Object.values(tailwind.theme.screens);

        const queries = {};

        keys.forEach((key, index) => {
          const value = values[index];

          if (typeof value === 'string') {
            queries[`(min-width: ${value})`] = key;
          }
        });

        return queries;
      })(),
    }),
  ],

  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'src/assets'),
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false,
            },
          },
          MediaQueryPlugin.loader,
          'postcss-loader',
        ],
      },
    ],
  },

  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: false,
          },
        },
        extractComments: false,
      }),

      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
            },
          ],
        },
      }),
    ],
  },
};