Как исправить ошибку при сборке bulma с помощью Webpack?

Question

[Леонид Роженцев]

Здравствуйте. Собираю фреймворк bulma c помощью webpack. Для удаления неиспользуемых стилей применяю purgecss. Но при запуске команды npm run build возникает ошибка:
Failed to load 'C:\Users\пк\OneDrive\Рабочий стол\bulma-site\webpack.config.js' config
[webpack-cli] ReferenceError: glob is not defined
at Object. (C:\Users\пк\OneDrive\Рабочий стол\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\пк\OneDrive\Рабочий стол\bulma-site\node_modules\webpack-cli\lib\webpack-cli.js:244:16)
at loadConfigByPath (C:\Users\пк\OneDrive\Рабочий стол\bulma-site\node_modules\webpack-cli\lib\webpack-cli.js:1710:30)
at WebpackCLI.loadConfig (C:\Users\пк\OneDrive\Рабочий стол\bulma-site\node_modules\webpack-cli\lib\webpack-cli.js:1830:36)

Вот код файла webpack.config.js:

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 }),
    }),
  ]
};

Вот 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

[Сергей]

Написано же:
[webpack-cli] ReferenceError: glob is not defined

1. Установите пакет glob: npm i -D glob
   
2. Подключите его: const glob = require('glob');
   

Comments

[Леонид Роженцев]

Спасибо

[Сергей]

Леонид Роженцев, если помог, жмите "Отметить решением".

[Леонид Роженцев]

Сергей, А можно ли сделать так, чтобы можно было запускать purgecss только при сборке в production, а в dеvelopment не использовать его?

[Сергей]

Можно. Надо задать переменную окружения. Например, установить модуль cross-env и в package.json в команде сборки для дева указать запись cross-env NODE_ENV=development, для прода соотвественно cross-env NODE_ENV=production:

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --config webpack/webpack.config.babel.js --mode development",
    "prod": "cross-env NODE_ENV=production webpack serve --config webpack/webpack.config.babel.js --mode production"
  }

Затем использовать так:

const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;

if (isProd) {
// Используем PurgeCSS.
}

[Леонид Роженцев]

Сергей, Спасибо!

[Леонид Роженцев]

Сергей, Подскажите, в какое место в webpack.config.js вставлять то условие?

[Леонид Роженцев]

Сергей, При добавлении условия появляется ошибка

[Сергей]

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;

const plugins = [
  new MiniCssExtractPlugin({
    filename: 'assets/css/style.css'
  }),
  new HtmlWebpackPlugin({
    template: "./src/index.html"
  })
];

if (isProd) {
  plugins.push(
    new PurgecssPlugin({
      paths: glob.sync(`${path.join(__dirname, 'dist')}/**/*`,  { nodir: true }),
    })
  );
}

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: plugins
};

[Леонид Роженцев]

Сергей, спасибо большое!