webpack sample

package.json

{
  "name": "fictional-university-theme",
  "version": "1.0.0",
  "description": "A fictional university WordPress theme.",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --config webpack.config.js --env.mode=development",
    "build": "webpack --config webpack.config.js --env.mode=production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "autoprefixer": "^10.4.2",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^7.0.0",
    "fse": "^3.0.1",
    "mini-css-extract-plugin": "^2.5.2",
    "postcss-color-function": "^5.0.0",
    "postcss-hexrgba": "^4.0.0",
    "postcss-import": "^14.0.2",
    "postcss-mixins": "^7.0.0",
    "postcss-nested": "^5.0.5",
    "postcss-simple-vars": "^6.0.3",
    "postcss-loader": "^6.2.1",
    "terser-webpack-plugin": "^6.0.0",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0",
    "webpack-manifest-plugin": "^5.3.2"
  }
}

webpack.config.js

/*
  SUPER IMPORTANT: This config assumes your theme folder is named
  exactly 'fictional-university-theme' and that you have a folder
  inside it named 'bundled-assets' - If you'd like to adapt this
  config to work with your own custom folder structure and names
  be sure to adjust the publicPath value on line #112. You do NOT
  need to update any of the other publicPath settings in this file,
  only the one on line #112.
*/

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
const fse = require("fs-extra");

const postCSSPlugins = [
  require("postcss-import"),
  require("postcss-mixins"),
  require("postcss-simple-vars"),
  require("postcss-nested"),
  require("postcss-hexrgba"),
  require("postcss-color-function"),
  require("autoprefixer"),
];

class RunAfterCompile {
  apply(compiler) {
    compiler.hooks.done.tap("Update functions.php", () => {
      // update functions php here
      const manifest = fse.readJsonSync("./app/wp-content/themes/fictional-university-theme/bundled-assets/manifest.json");
      fse.readFile("./app/wp-content/themes/fictional-university-theme/functions.php", "utf8", (err, data) => {
        if (err) {
          console.log(err);
        }

        const scriptsRegEx = new RegExp("/bundled-assets/scripts.+?'", "g");
        const vendorsRegEx = new RegExp("/bundled-assets/vendors.+?'", "g");
        const cssRegEx = new RegExp("/bundled-assets/styles.+?'", "g");

        let result = data
          .replace(scriptsRegEx, `/bundled-assets/${manifest["scripts.js"]}'`)
          .replace(vendorsRegEx, `/bundled-assets/${manifest["vendors~scripts.js"]}'`)
          .replace(cssRegEx, `/bundled-assets/${manifest["styles.css"]}'`);

        fse.writeFile("./app/wp-content/themes/fictional-university-theme/functions.php", result, "utf8", (err) => {
          if (err) return console.log(err);
        });
      });
    });
  }
}

const config = {
  entry: {
    scripts: "./app/wp-content/themes/fictional-university-theme/js/scripts.js",
  },
  output: {
    filename: "[name].[contenthash].js",
    chunkFilename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "app/wp-content/themes/fictional-university-theme/bundled-assets"),
    publicPath: "/app/wp-content/themes/fictional-university-theme/bundled-assets/",
    clean: true,
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    hot: true // Add this line to enable hot module replacement
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", { targets: { node: "current" } }],
          },
        },
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, { loader: "css-loader", options: { url: false } }, { loader: "postcss-loader", options: { postcssOptions: { plugins: postCSSPlugins } } }],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          ecma: 2015,
        },
      }),
    ],
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
  },
  plugins: [
    const webpack = require('webpack');
    module.exports = {
    entry: ['./src/js/index.js', './src/scss/style.scss'],
    output: {
      filename: 'js/bundle.js',
      path: path.resolve(__dirname, 'dist'),
    new webpack.HotModuleReplacementPlugin() // Add this line to enable HMR
    new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" }),
    new CleanWebpackPlugin(),
    new WebpackManifestPlugin({
      fileName: "manifest.json",
      publicPath: "/app/wp-content/themes/fictional-university-theme/bundled-assets/",
    }),
    new RunAfterCompile(),
  ],
};

module.exports = config;