Why I should state scss file in entry webpack config

Question

why my webpack config cannot watch scss file? if i explicitly add the file into entry then it's working, creating css file. is it a good practice?

/// <binding ProjectOpened='Watch - Development' />

"use strict";

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    watch: true,
    entry: {
        app: './src/scripts/app.js',
        People: './Views/People/Index.cshtml.js',
        Service: './Views/Service/Index.cshtml.js',
        sass: './src/sass/app.scss' // <- this should explicitly stated
    },
    plugins: [
        new MiniCssExtractPlugin({
              path: path.join(__dirname, '/wwwroot/css/'),
              filename:  'app.css',
        })
    ],
    output: {
        publicPath: "/js/",
        path: path.join(__dirname, '/wwwroot/js/'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader: "ts-loader",
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { url: false, sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            }
        ]
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        },
        extensions: ['.js', '.vue']
    }
};

Answer 1

Webpack's watcher doesn't hold any grudge against scss files.

Webpack start making dependency graph from all the files mentioned in entry files and then all the file imported in those file and then all imports of next level and on.......

Webpack watch only tracks files which are in the above dependency graph.

Now, you must import your files in any of the file that is already in dependency graph.

If your scss is not imported by any file in dependency graph, then you must add it as new entry file or you can use any of the plugin of the IDE you are using to keep an watch on scss files and compile them to css on change.