Exclude Some Css Files In Webpack

I'm facing a problem with webpack. My project has the following structure. Folder structure: src js app.js // For importing app.scss file vendor.js // For importing ve

Solution 1:

So you want vendor prefixes don't add on Webpack generated vendor.css file.

Remember Webpack parse loader array on reverse order. You could add exclude property on the object of postcss-loader with the regular expression.

webpack.config.js:

const path = require('path');
constMiniCssExtractPlugin = require('mini-css-extract-plugin');
constFileManagerPlugin = require('filemanager-webpack-plugin');
module.exports = function() {
    return ({
        entry: {
            'vendor': './src/js/vendor.js',
            'app': './src/js/app.js',
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].[chunkhash].js'
        },
        module: {
            rules: [{
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },// Take scss file and split into a separate css file
                },
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: 'css-loader',
                    },// Interprets scss @import and url() like import/require()
                },
                {
                    test: /\.s(c|a)ss$/,
                    exclude: [/vendor/],
                    use: {
                        loader: 'postcss-loader',
                    },
                }, // PostCSS turns your SCSS file into a JS object & converts that object back to a SCSS file
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: 'sass-loader',
                    },// look for scss file through sass-loader, compile scss into css code
                },
            ]
        },
        plugins: [
            newMiniCssExtractPlugin({
                filename: 'css/[name].[contenthash].css'
            }),
            // Before BuildnewFileManagerPlugin({
                onStart: {
                    delete: [
                        'dist',
                    ],
                }
            }),
        ]
    });
};