webpack config supporting css modules and normal css

webpack.config.js

'use strict'

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isDev = process.env.NODE_ENV === 'development'

// style files regexes
const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/

const getLessLoader = (cssOptions) => ({
  loader: require.resolve('less-loader'),
  options: {
    sourceMap: cssOptions.sourceMap,
    paths: [
      path.resolve(__dirname, 'node_modules'),
    ],
  },
})

const getStyleLoaders = (cssOptions, less) => {
  const loaders = [
    MiniCssExtractPlugin.loader, {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    }, {
      loader: require.resolve('postcss-loader'),
      options: {
        sourceMap: cssOptions.sourceMap,
      },
    },
  ]

  if (less) {
    loaders.push(getLessLoader(cssOptions))
  }

  return loaders
}

module.exports = {
  mode: isDev ? 'development' : 'production',

  devtool: isDev ? 'source-map' : 'cheap-module-source-map',

  stats: {
    children: false,
    colors: true,
    modules: false,
    timings: true,
  },

  entry: {
    app: './src/app/index.jsx',
    bookmarklet: './src/bookmarklet/index.jsx',
  },

  resolve: {
    extensions: ['.js', '.jsx', '.mjs', '.json'],
    mainFields: ['module', 'browser', 'main'],
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].chunk.js',
    publicPath: '/',
  },

  module: {
    rules: [{
      oneOf: [{
        test: [/\.svg$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('file-loader'),
        options: {
          limit: 10000,
          name: 'media/[name].[hash:8].[ext]',
        },
      }, {
        test: cssRegex,
        exclude: cssModuleRegex,
        use: getStyleLoaders({
          sourceMap: true,
          importLoaders: 1,
        }),
      }, {
        test: cssModuleRegex,
        use: getStyleLoaders({
          sourceMap: true,
          importLoaders: 1,
          modules: true,
          // ensure this is the same as the ident specified in babelrc
          localIdentName: '[name]__[local]--[hash:8]',
        }),
      }, {
        test: lessRegex,
        exclude: lessModuleRegex,
        use: getStyleLoaders({
          sourceMap: true,
          importLoaders: 2,
        }, true),
      }, {
        test: lessModuleRegex,
        use: getStyleLoaders({
          importLoaders: 2,
          modules: true,
          sourceMap: true,
          // ensure this is the same as the ident specified in babelrc
          localIdentName: '[name]__[local]--[hash:8]',
        }, true),
      }, {
        test: /\.(mjs|js|jsx)$/,
        exclude: /node_modules/,
        use: [ require.resolve('thread-loader'), {
          loader: 'babel-loader',
          options: {
            envName: 'client',
            cacheDirectory: true,
          },
        }],
      }],
    }],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].chunk.css',
      allChunks: true,
    }),
  ],
}