Why does webpack get an error when compiling SCSS?

Question

css

I'm trying to compile SCSS. It is necessary that SCSS (preferably from all src) is not included in html, but is a separate file. Please tell me how to fix the error, or provide another solution to this problem.

webpack.config.js

var webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

var outputPathArr = __dirname.split('\\');
outputPathArr.pop();

module.exports = {
  entry: [
    '.src/js/app.js',
    './src/style.scss'
  ],
  output: {
    path: outputPathArr.join('\\') + "\\smart\\js",
    filename: "script.js"
  },
  devtool: "source-map",
  resolve: {
    modules: [__dirname, "node_modules"]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new CleanWebpackPlugin(),
    new ExtractTextPlugin({ // !!!!!!!!!!! Ошибка ведёт к этому плагину
      filename: './style.css',
      allChunks: true,
    }),
  ],
  module: {
        rules: [
      {
        test: /\.scss$/,
        use: [
          "raw-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(sass|scss)$/,
        include: (__dirname + '\\src\\scss'),
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: "css-loader",
              options: {
                sourceMap: true,
                minimize: true,
                url: false
              }
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true
              }
            }
          ]
        })
      },
    ]
  }
}

Sample directory structure:

smart-src
    node_modules
    src
        js
            app.js
        style.scss // -->
    package.json
    package-lock.json
    webpack.config.js
smart // dist
    js
        script.js
    style.css // <--

Error in console

(node:11184) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.
hooks` instead
***smart-src\node_modules\webpack\lib\Chunk
.js:849
throw new Error(
^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof
Entrypoint instead
at Chunk.get (** *smart-src\node_modules
\webpack\lib\Chunk.js:849:9)

Answer 1

ExtractTextPlugin is deprecated and doesn't work with webpack 4
use https://www.npmjs.com/package/mini-css-extract-plugin