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