How to properly apply Webpack 5 plugins for SCCS and CSS?

  • 0
    Good afternoon.

    I will describe what the functionality should be:
    SCCS and CSS are compiled into one file
    Using plugins autoprefixer, sort-css-media-queries, cssnano

    How to make it so that the output has 2 files, one is not minified, and the second is minified?
    How to tighten the value of the version specified in package.json in the name of these files?
    That is, to have app.css and app.min.1.0.0.css in the output

    The code I'm writing
    webpack.config.js

    const path = require('path')
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
    module.exports = {
        mode: 'development',
        entry: {
            app: path.resolve(__dirname, './src/index.js')
        },
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: '[name].js',
        },
        plugins: [
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin({
                filename: '[name].css',
            })
        ],
        devServer: {
            port: 3300
        },
        module: {
            rules: [
                {
                    // css
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                         {
                             loader: 'postcss-loader',
                             options: {
                                 postcssOptions: {
                                     config: path.resolve(__dirname, 'src/config/postcss.config.js')
                                 }
                             },
                         },
                        
                    ],
                },
                {
                    // scss
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                postcssOptions: {
                                    config: path.resolve(__dirname, 'src/config/postcss.config.js'),
                                }
                            },
                        },
                        'sass-loader'
                    ]
                },
                {
                    test: /\.m?js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                        presets: ['@babel/preset-env']
                        }
                    }
                }
            ]
        },
    }

    JavaScript Harper Roy, Oct 4, 2019

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!