Why is style.css not being generated?

Question

webpack

Hello. Webpack creates bundle.js fine. but style.css doesn't want to create. I run npm run build and the following lines are displayed.

$ npm run build
> [email protected] build C:\Users\Anton\Desktop\Tests\test-verstka\sait
> webpack
(node:508) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
C:\Users\Anton\Desktop\Tests\test-verstka\sait\node_modules\webpack\lib\Chunk.js:468
throw new Error(
^
Error: Chunk.entrypoints: Use Chunks .groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (C:\Users\Anton\Desktop\Tests\test-verstka\sait\node_modules\webpack\lib\Chunk.js:468:9)
at C:\Users\ Anton\Desktop\Tests\test-verstka\sait\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
at Array.forEach()
at C:\Users\Anton\Desktop\Tests\test-verstka\sait\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
at AsyncSeriesHook.eval [as callAsync] (eval at create ( C:\Users\Anton\Desktop\Tests\test-verstka\sait\node_modules\tapable\lib\HookCodeFactory.js:24:12), :7:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users \Anton\Desktop\Tests\test-verstka\sait\node_modules\tapable\lib\Hook.js:35:21)
at Compilation.seal (C:\Users\Anton\Desktop\Tests\test-verstka\sait\node_modules \webpack\lib\Compilation.js:888:27)
at hooks.make.callAsync.err (C:\Users\Anton\Desktop\Tests\test-verstka\sait\node_modules\webpack\lib\Compiler.js:479 :17)
at _err0 (eval at create (C:\Users\Anton\Desktop\Tests\test-verstka\sait\node_modules\tapable\lib\HookCodeFactory.js:24:12), :11:1)
at _addModuleChain (C:\ Users\Anton\Desktop\Tests\test-verstka\sait\node_modules\webpack\lib\Compilation.js:756:12)
at processModuleDependencies.err (C:\Users\Anton\Desktop\Tests\test-verstka\sait\ node_modules\webpack\lib\Compilation.js:695:9)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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! C:\Users\Anton\AppData\Roaming\npm-cache\_logs\2018-03-31T12_32_15_910Z-debug.log

and in the site console writes

GET file:///C:/Users/Anton/Desktop/Tests/test-verstka/sait/dist/style.css net::ERR_FILE_NOT_FOUND

Here is the webpack.config.js code

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

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader']
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ]
};

here is package.json

{
  "name": "sait",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.8.3",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
  }
}

What could be the problem?

Answer 1

extract-text-webpack-plugin несовместим с 4-й версией вебпака, есть отдельная альфа версия плагина, но и она работает некорректно.
разработчики рекомендуют переходить на mini-css-extract-plugin, специально созданный на замену extract-text-plugin
https://github.com/webpack-contrib/mini-css-extrac...