How to set up sass in webpack?

Question

webpack

Started learning webpack. I have a seemingly trivial task: I need to take all the .scss files and translate each of them into .css . Those. if the folder contains files one.css, two.css, you need to translate them into one.scss, two.scss and put them in the ./css folder I
installed node-sass: npm install node-sass --save-dev
Then I created ./app folder and webpack.config.js file in it . Here is the content of webpack.config.js :

var webpack = require("webpack"),
path = require('.');

module.exports = {
    entry: "./main",
    resolve: {
        modulesDirectories: [
            "."
        ]
    },
    output: {
        publicPath: "js/",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {test: /\.scss$/, use: 'sass-loader'}
        ]
    },
    sassLoader: {
        includePaths: ["./css"]
    }
};

Then I press on the command line: webpack to which the program gives me:

module.js:472
    throw err;
    ^

Error: Cannot find module '.'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/var/www/training.ru/train_example/webpack.config.js:2:8)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

Here is the structure of the project:

Please tell me what needs to be fixed? How to make a configuration file correctly?

Answer 1

The error clearly tells you that the problem is here:
I don't even know if this is valid code... will it look for index.js in this case?) In any case, this is hardly what you wanted.
You need sass-loader and extract-text-plugin. Here is a small article (EN).