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

Здравствуйте. Собираю фреймворк 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"
  }
}
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
@SergeiB
Написано же:
[webpack-cli] ReferenceError: glob is not defined

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы