webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RtlCssPlugin = require('rtlcss-webpack-plugin');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

const plugins = defaultConfig.plugins.filter(
  (plugin) => plugin?.constructor?.name !== 'RtlCssPlugin'
);

plugins.push(
  new RtlCssPlugin({
    filename: 'panel-rtl.css',
  })
);

module.exports = {
  ...defaultConfig,
  entry: {
    panel: path.resolve(__dirname, 'src/panel/index.jsx'),
  },
  output: {
    ...defaultConfig.output,
    path: path.resolve(__dirname, 'assets'),
    filename: 'panel.js',
  },
  optimization: {
    ...defaultConfig.optimization,
    splitChunks: false,
    runtimeChunk: false,
  },
  plugins: plugins.map((plugin) => {
    if (plugin instanceof MiniCssExtractPlugin) {
      return new MiniCssExtractPlugin({ filename: 'panel.css' });
    }
    return plugin;
  }),
};