Webpack Config

loaders.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const FileLoader = {
    test: /\.(png|jpe?g|gif)$/i,
    type: 'asset/resource',
  };



const CSSLoader = {
  test: /\.css$/i,
  exclude: /node_modules/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: 'images/',
      }
    },
    {
      loader: 'css-loader',
      options: {importLoaders: 1},
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          config: path.resolve(__dirname, 'postcss.config.js'),
        },
      },
    },
  ],
};

const JSLoader = {
    test: /\.js$/i,
    exclude: /node_modules/,
    use: [
        {
        loader: 'babel-loader',
        options: {
            plugins: [
                "@babel/plugin-proposal-class-properties"
            ],
            presets: [
                "@babel/preset-env",
                [
                    "@babel/preset-react",
                    {
                        pragma: "wp.element.createElement",
                        pragmaFrag: "wp.element.Fragment",
                        // development: isDevelopment()
                    }
                ]
            ]
        }
    }
    ]
};

const FontLoader ={
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        outputPath: 'fonts',
          publicPath: 'fonts/',
          name: '[name].[ext]',
      }
    }
  ]
};

module.exports = {
    CSSLoader: CSSLoader,
    JSLoader: JSLoader,
    FileLoader: FileLoader,
    FontLoader: FontLoader
};

package.json

{"scripts": {
    "bundle": "webpack --config webpack/webpack.prod.js ",
    "watch": "webpack --watch --config webpack/webpack.dev.js"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/eslint-parser": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@wordpress/browserslist-config": "^4.1.2",
    "@wordpress/stylelint-config": "^20.0.2",
    "autoprefixer": "^10.4.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.4",
    "browser-sync": "^2.27.9",
    "browser-sync-webpack-plugin": "^2.3.0",
    "browserslist": "^4.20.2",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^10.2.4",
    "css-loader": "^6.7.1",
    "cssnano": "^5.1.7",
    "eslint": "^8.12.0",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^2.6.0",
    "postcss": "^8.4.12",
    "postcss-custom-media": "^8.0.0",
    "postcss-custom-properties": "^12.1.6",
    "postcss-font-magician": "^3.0.0",
    "postcss-functions": "^4.0.2",
    "postcss-import": "^14.1.0",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.4.3",
    "resolve-url-loader": "^5.0.0",
    "stylelint": "^14.6.1",
    "stylelint-webpack-plugin": "^3.2.0",
    "webpack": "^5.71.0",
    "webpack-cli": "^4.9.2",
    "webpack-merge": "^5.8.0"
  }}

plugins.js

const path = require('path');
const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
const _ESLintPlugin = require('eslint-webpack-plugin');
const _StyleLintPlugin = require('stylelint-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const _BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const _CopyPlugin = require("copy-webpack-plugin");


const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
    chunkFilename: "[id].css",
        filename: chunkData => {
            return chunkData.chunk.name === "script"
                ? "global.css"
                : "[name].css";
        }
  });

const ESLintPlugin = new _ESLintPlugin({
    context: path.resolve(__dirname, '../src/js'),
    files: '**/*.js',
});

const StyleLintPlugin = new _StyleLintPlugin({
  context: path.resolve(__dirname, '../src/'),
  files: '**/*.css',
});

const BrowserSyncPlugin = new _BrowserSyncPlugin({
    // browse to http://localhost:3000/ during development,
    // ./public directory is being served
    host: 'localhost',
    port: 3000,
    proxy: 'http://rua-postdoc-portal.local/'
  });



module.exports = {
    MiniCssExtractPlugin: MiniCssExtractPlugin,
    StyleLintPlugin: StyleLintPlugin,
    ESLintPlugin: ESLintPlugin,
    BrowserSyncPlugin: BrowserSyncPlugin,
    CleanWebpackPlugin: new CleanWebpackPlugin(),
};

webpack.common.js

const path = require('path');
const loaders = require('./loaders');
const webpack = require('webpack'); // to access built-in plugins
const plugins = require('./plugins');

module.exports = {
    entry: {
        script: "./assets/src/js/index.js",
    },
    module: {
        rules: [
            loaders.JSLoader,
            loaders.CSSLoader,
            //loaders.FileLoader,
            loaders.FontLoader
        ]
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "../dist"),
        assetModuleFilename: 'images/[name][ext]'
    },
    plugins: [
        new webpack.ProgressPlugin(),
        plugins.CleanWebpackPlugin,
        plugins.ESLintPlugin,
        plugins.StyleLintPlugin,
        plugins.MiniCssExtractPlugin,
    ],
    externals: {

    }
};

webpack.dev.js

'use strict';

const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const plugins = require('./plugins');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
  },
  plugins: [
    plugins.BrowserSyncPlugin,
  ]
});

webpack.prod.js

'use strict';

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});