How to use Webpack 4 to compile Sass files properl

Question

My code is working but it ends up with unnecessary .js files in the output directory. I'm trying to find a way to get a clean output. To make it clear what I mean I describe my code below:

You can find my project here.

The Webpack config is the following (tasks/options/webpack.js, I'm using grunt to run webpack if it matters):

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

module.exports = {
    build: {
        ...
        entry: {
            app: `${path.resolve()}/src/assets/js/app.js`,
            main: `${path.resolve()}/src/assets/sass/main.scss`,
            editor: `${path.resolve()}/src/assets/sass/editor.scss`,
        },
        output: {
            path: `${path.resolve()}/dist/assets/js`,
            filename: '[name].js',
        },
        ...
        devtool: 'nosources-source-map',
        plugins: [
            ...
            new webpack.LoaderOptionsPlugin({
                options: {
                    postcss: [autoprefixer()],
                },
            }),
            new MiniCssExtractPlugin({
                // Options similar to the same options in webpackOptions.output
                // both options are optional
                filename: '../css/[name].css',
            }),
            ...
        ],
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules|vendor)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/env', '@babel/preset-react'],
                            plugins: [
                                'transform-class-properties',
                                '@babel/plugin-proposal-object-rest-spread',
                            ],
                        },
                    },
                },
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        {
                            loader: 'css-loader?-url&sourceMap',
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                parser: 'postcss-scss',
                                sourceMap: true,
                            },
                        },
                        {
                            loader: 'sass-loader',
                            query: {
                                outputStyle: 'extended',
                                sourceMap: true,
                                sourceMapContents: false,
                            },
                        },
                    ],
                },
            ],
        },
    },
};

If I run this I get the following output in dist/assets/...:

• js/app.js
• js/app.js.map
• js/editor.js
• js/editor.js.map
• js/main.js
• js/main.js.map
• css/editor.css
• css/editor.css.map
• css/main.css
• css/main.css.map

where the following files are not needed with only some webpack code in it:

• js/editor.js
• js/editor.js.map
• js/main.js
• js/main.js.map

I get that they are generated because of the output I declared and the MiniCssExtractPlugin extracts the (S)CSS code from the .js files.

Isn't there a way where I can say: "If the entry is a SCSS file, output the CSS in dist/css/[name].css" instead of first output it in dist/js/[name].js then extract the CSS inside this JS file to dist/css/[name].css and leaving unused .js files in dist/js/?

Maybe it's not how Webpack works.

I surely can run another plugin to clean up the dist folder afterwards but I'm curious if there is a way to put all the files in the right place without leaving files I don't need there.

Hope everything is clear enough, if not please ask. Thanks for your help!

Answer 1

I had the same problem and I've found that some workarounds have been created as plugin to avoid such behavior. webpack-fix-style-only-entries

And if I read correctly, it has been fix for the next version of webpack (^5)
webpack git issue