scss-files still in js-bundle altough extracted

Bug report

Hi,
I am using sass-loader toghether with typings-for-css-modules-loader and MiniCssExtractPlugin, in order to get js-files together with corresponding css files for my multiple entries. However, in difference to webpack 3, now the styles.scss-files still appear in the js-bundles (as seen in report), which seems to be the reason why my bundles are now greater (in production-build) than using webpack 3.

my configuration is:

var path = require("path");
var webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
    entry: {
        startPage: ["./Entries/BodyStartSeite/BodyStartSeite"],
        profilSeite: ["./Entries/BodyProfilSeite/BodyProfilSeite"],
        meinBereichSeite: ["./Entries/BodyMeinBereichSeite/BodyMeinbereichSeite"],
        orgInhalteSeite: ["./Entries/BodyOrgInhalteSeite/BodyOrgInhalteSeite"],
        zusammenArbeitSeite: ["./Entries/BodyZusammenArbeitSeite/BodyZusammenArbeitSeite"],
        wissenCommunitiesSeite: ["./Entries/BodyWissenCommunitiesSeite/BodyWissenCommunitiesSeite"],
        appsDiensteSeite: ["./Entries/BodyAppsDiensteSeite/BodyAppsDiensteSeite"],
        masterpage: ["babel-polyfill", "url-polyfill", "./Entries/MasterPage/MasterPage"],
        aufgaben: ["./Entries/BodyAufgabenSeite/BodyAufgaben"],
        ribbonFunctions: ["./Entries/RibbonFunctions/RibbonFunctions"],
        searchResults: ["./Entries/SearchResults/SearchResults"],
        newsPageLayoutSocial: ["./Entries/PageLayouts/NewsPageLayoutSocial"],
        contentSeitePageLayout1: ["./Entries/PageLayouts/ContentSeitePageLayout1.global.scss"],
        contentSeitePageLayout2: ["./Entries/PageLayouts/ContentSeitePageLayout2"],
        contentSeitePageLayout3: ["./Entries/PageLayouts/ContentSeitePageLayout3"],
        commentManagementList: ["./Entries/CommentManagementList/CommentManagementList"],
        newsPageLayoutImageRight: ["./Entries/PageLayouts/newsPageLayoutImageRight"],
        newsPageLayoutPictureHeader: ["./Entries/PageLayouts/newsPageLayoutPictureHeader"],
        newsPageLayoutDisplayDialog: ["./Entries/PageLayouts/newsPageLayoutDisplayDialog.global.scss"],
    },
    output: {

        filename: "[name].js",
        path: path.resolve(__dirname, "dist/"),
        // sourceMapFilename: "maps/[file].map",
    },
    context: __dirname + "/src",
    // Enable sourcemaps for debugging webpack's output.
    // devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json", ".css", ".scss"],
        plugins: [new TsconfigPathsPlugin()],
    },

    module: {
        rules: [{
            test: [/\.scss$/, /\.css$/],
            include: [/node_modules/, /masterpage\.css/, /\.global\./i],
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: "css-loader",
                    options: {
                        url: false,
                    },
                }, {
                    loader: "sass-loader",
                }],
        }, {
            test: [/\.scss$/, /\.css$/],
            exclude: [/node_modules/, /masterpage\.css/, /\.global\./i],
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: "typings-for-css-modules-loader",
                    options: {
                        namedExport: true,
                        camelCase: true,
                        modules: true,
                        localIdentName: "[local]--[hash:base64:5]",
                        importLoaders: 1
                    },
                },
                "sass-loader",
            ],
        },
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        {
            test: /\.tsx?$/,
            loader: "awesome-typescript-loader",
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: "url-loader?limit=100000",
        },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            // {
            //     enforce: "pre",
            //     test: /\.js$/,
            //     // exclude: [/node_modules/],
            //     loader: "source-map-loader",
            // },
        ],
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    // externals: {
    //     "react": "React",
    //     "react-dom": "ReactDOM",
    // },
    plugins: [
        new CleanWebpackPlugin(["dist"], { exclude: ["web.config"] }),
        new webpack.WatchIgnorePlugin([
            /\.d\.ts$/,
        ]),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].css",
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new CopyWebpackPlugin([{
            from: "../Deployment/SharePointcomponents/Branding/Images/CDN/logo.png",
        },
        {
            from: "../Deployment/SharePointcomponents/Branding/Images/CDN/top-background.png",
        },
        {
            from: "../Deployment/SharePointcomponents/Branding/Images/CDN/zeitbuchung.png",
        },
        {
            from: "../Deployment/SharePointcomponents/Branding/Images/CDN/main-background.png",
        },
        {
            from: "./weathericons",
            to: "weathericons",
        },
        {
            from: "./UserProfilePhoto",
            to: "UserProfilePhoto",
        },
        {
            from: "./font",
            to: "posticon",
        },

        ], {
                context: __dirname,
            },
        ),
        // new webpack.SourceMapDevToolPlugin({
        //     filename: "maps/[file].map",
        //     exclude: "vendor",
        // }),
    ],
    optimization: {
        splitChunks: {
            chunks: "initial",
            cacheGroups: {
                default: false,
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all",
                    reuseExistingChunk: true,
                    priority: 20,
                },
                common: {
                    minChunks: 2,
                    name: "common",
                    chunks: "all",
                    reuseExistingChunk: true,
                    priority: 10,
                },
            },
        },
    },
    stats: {
        maxModules: 0,
        hash: false,
        children: false,
        excludeAssets: [/.map/, /weathericons/],
        entrypoints: false,
    },
    mode: "production",
};

and the report shows the scss-files still in the bundle:

image

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

The expected result would be, that the scss-files are left out of the js-bundles (like in webpack 3) and only remain in the css-files, which will result in less size.

Other relevant information:
webpack version: 4.15.1
Node.js version:
Operating System: Windows 10 x64
Additional tools:

Author: Fantashit

1 thought on “scss-files still in js-bundle altough extracted

  1. Why is there such a huge difference between webpack 3 and webpack 4, altough using the same config?

    It’s a major version release.

    btw. there was no change regarding css minimizing in webpack, you probably also upgraded css-loader.

Comments are closed.