How to compile sass files into separate folder in webpack?

Question

Sass

Good afternoon! I just can’t figure out how to compile sass files and put them in the dist
folder This is how my webpack.config looks like for now

webpack.config

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

const PATHS = {
    source: path.join(__dirname, './app'),
    build: path.join(__dirname, './dist')
};

module.exports = {
    devtool: 'source-map',
    context: PATHS.source,
    entry: PATHS.source + '/js/app.js',
    output: {
        path: PATHS.build,
        filename: 'js/build.js'
    },
    devServer: {
        contentBase: PATHS.build,
        compress: true,
        historyApiFallback: {
            index: 'index.html',
            hot: true
        }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015']
                        }
                    }
                ]
            },
            {
                test: /\.(sass|scss)$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader',
                        'sass-loader'
                    ]
                })
            }
        ]
    }
};

He puts js files in the dist folder without any problems, but I don’t understand what to do with styles. How to specify where to put them and in general, so that he would start collecting them?

Answer 1

extract plugin should also be connected in plugins, open the dock for it and there is an example