Webpack configuration that could be used as a starting point.

webpack.config.js

const webpack = require('webpack');
const glob = require('glob');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// npm install needed 
// css-loader postcss-loader postcss-import tailwindcss autoprefixer mini-css-extract-plugin glob

let globOptions = {
    ignore: [
      './node_modules/**',
      './venv/**',
      './django-sockpuppet/**',
      './dist/**'
    ]
}

let entryFiles = glob.sync("./**/javascript/*.js", globOptions)

let entryObj = {};
entryFiles.forEach(function(file){
    if (file.includes('.')) {
        let parts = file.split('/')
        let path = parts.pop()
        let fileName = path.split('.')[0];
        entryObj[fileName] = `${file}`;
    }
});
// entry points for css. Look for all css files in project.
entryObj['style'] = glob.sync("./**/*.css", globOptions)
console.log(entryObj)

let cssRules = {
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: [
          require('postcss-import'),
          require('tailwindcss'),
          require('autoprefixer')
        ]
      }
    }
  ]
}


module.exports = function(env, argv) {
  let config = {
      mode: process.env.NODE_ENV,
      entry: entryObj,
      output: {
          path: __dirname + '/dist/',
          filename: 'js/[name].js'
      },
      optimization: {
          minimize: false
      },
      plugins: [
        // extracting any css into its own file.
        // the loader is also needed for css.
        new MiniCssExtractPlugin({
          filename: "css/[name].css",
        })
      ],
      module: {
        rules: [
          cssRules,
        ]
      },
  }
  return config
}