Webpack 5: что значат эти ошибки при сборке проекта?

Question

[MasterCopipaster]

Можете объяснить что значат эти ошибки и почему они появляются?

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './public/js/main.js',
  output: {
    filename: './public/build/bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules']
  },
  module: {
    loaders: [
      {
        test: /\.js/,
        loader: 'babel',
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|eot|ttf|woff|woff2\?v=4.7.0|woff\?v=4.7.0|eot\?v=4.7.0|ttf\?v=4.7.0|svg\?v=4.7.0|video.play.png)$/,
        type: 'var',
        loader: 'raw-loader',
      },
    ]
  },

  plugins: [
    new ExtractTextPlugin('./public/build/bundle.css')
  ]
};

При сборке я получаю следующие ошибки (там просто большой текст поэтому в pastebin)

Объясните, почему эти ошибки появляются? в чем причина? я просто даже не знаю как загуглить, чтобы найти решение этой проблемы.

Answer 1

[Дмитрий Беляев]

:warning: Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

https://v4.webpack.js.org/plugins/extract-text-web...

Вам нужен https://v4.webpack.js.org/plugins/mini-css-extract...

Comments

[MasterCopipaster]

Дмитрий Беляев - спасибо за уделенное время, я ценю это. Вы бы не могли мне еще подсказать, не сталкивались ли вы при интеграции с такой проблемой:

я сделал

npm install --save-dev mini-css-extract-plugin

и изменил свой конфиг

var ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './public/js/main.js',
  output: {
    filename: './public/build/bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules']
  },
  module: {
    loaders: [
      {
        test: /\.js/,
        loader: 'babel',
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|eot|ttf|woff|woff2\?v=4.7.0|woff\?v=4.7.0|eot\?v=4.7.0|ttf\?v=4.7.0|svg\?v=4.7.0|video.play.png)$/,
        type: 'var',
        loader: 'raw-loader',
      },
    ]
  },

  plugins: [
    new ExtractTextPlugin('./public/build/bundle.css'),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ]
};

npm run build

> source@1.0.0 build /home/master/project
> webpack

/home/master/project/node_modules/mini-css-extract-plugin/dist/index.js:50
class CssModule extends webpack.Module {
^

TypeError: Class extends value undefined is not a constructor or null
at Function.getCssModule (/home/master/project/node_modules/mini-css-extract-plugin/dist/index.js:50:37)
at MiniCssExtractPlugin.apply (/home/master/project/node_modules/mini-css-extract-plugin/dist/index.js:358:44)
at Compiler.apply (/home/master/project/node_modules/tapable/lib/Tapable.js:164:16)
at WebpackOptionsApply.process (/home/master/project/node_modules/webpack/lib/WebpackOptionsApply.js:62:18)
at webpack (/home/master/project/node_modules/webpack/lib/webpack.js:22:48)
at processOptions (/home/master/project/node_modules/webpack/bin/webpack.js:152:17)
at Object. (/home/master/project/node_modules/webpack/bin/webpack.js:192:1)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! source@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the source@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/master/.npm/_logs/2021-04-17T06_34_33_130Z-debug.log

Не сталкивались ли вы с такой проблемой? я уже несколько часов не могу ее решить в webpack 5.33.2

[Дмитрий Беляев]

MasterCopipaster, не сталкивался, скорее всего в версиях расхождение
ну и в конфиге Вы лоадер не поменяли

[MasterCopipaster]

Дмитрий Беляев, Эх.. тогда увы не могу пока отметить ваш ответ решением потому что досихпор пытаюсь тупо запустить mini-css-extract-plugin - как только заработает отмечу решением если поможет.