Automatically configuration webpack5 style loader

Install

npm i --save-dev @pieced/style-config-webpack-plugin

Webpack Config

const StyleConfigWebpackPlugin = require('@pieced/style-config-webpack-plugin');
module.exports = {
  plugins: [new StyleConfigWebpackPlugin()],
};

Options

useCssModules

• type boolean
• default true

cssModulesQuery

• type string
• default modules

usePostCSS

• type boolean
• default true

extract

• type boolean or object
• default

const defaultExtract = webpack.mode === 'production' && {
  filename: 'static/css/[contenthash:10].css',
  chunkFilename: 'static/css/[contenthash:10].css',
}

sourceMap

• type boolean
• default webpack.mode === 'development'

cssModulesName

• type string
• default webpack.mode === 'development' ? '[name]__[local]--[hash:base64:5]' : '_[hash:base64:10]'

generator

• type function
• default (suffix, loaders) => (webpack.mode === 'development' ? ['style-loader'].concat(loaders) : loaders)

minimizer

• type object
• css-minimizer-webpack-plugin options
• default

const defaultMinimizer = {
  minimizerOptions: {
    preset: ['default', {
      discardComments: {
        removeAll: true,
      },
    }],
  },
}