How to fix an error when building bulma with Webpack?

Question

webpack

Hello. I'm building the bulma framework using webpack. I use purgecss to remove unused styles. But when I run npm run build , I get an error:
Failed to load 'C:\Users\pc\OneDrive\Desktop\bulma-site\webpack.config.js' config
[webpack-cli] ReferenceError: glob is not defined
at Object . (C:\Users\pc\OneDrive\Desktop\bulma-site\webpack.config.js:38:14)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module ._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/ modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at WebpackCLI.tryRequireThenImport (C:\Users\pc\OneDrive\Desktop\bulma-site\node_modules\webpack-cli\lib\webpack-cli. js:244:16)
at loadConfigByPath (C:\Users\pc\OneDrive\Desktop\bulma-site\node_modules\webpack-cli\lib\webpack-cli.js:1710:30)
at WebpackCLI.loadConfig (C: \Users\pc\OneDrive\Desktop\bulma-site\node_modules\webpack-cli\lib\webpack-cli.js:1830:36)

Here is the webpack.config.js file code:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'assets/js/bundle.js'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              // options...
            }
          }
        ]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'assets/css/style.css'
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new PurgecssPlugin({
      paths: glob.sync(`${path.join(__dirname, 'dist')}/**/*`,  { nodir: true }),
    }),
  ]
};

Here is package.json

{
  "name": "bulma-site",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bulma": "^0.9.3",
    "css-loader": "^6.5.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.5",
    "node-sass": "^6.0.1",
    "purgecss": "^4.1.3",
    "purgecss-webpack-plugin": "^4.1.3",
    "sass-loader": "^12.3.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1"
  }
}

Answer 1

It is written:
[webpack-cli] ReferenceError: glob is not defined

1. Install glob package:npm i -D glob
   
2. Plug it in:const glob = require('glob');