This Webpack configuration will output Javascript and CSS files to different directories. Example is dist/js/main.js, dist/css/main.csss, dist/css/bootstrap.css

webpack.config.js

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'static/index.js'),
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'dist/js'),
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `${packageName.replace('@', '')}`;
          },
          reuseExistingChunk: true,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
    new HtmlWebpackPlugin({
      title: 'Keywording',
      template: './static/template.html',
    }),
    new BundleAnalyzerPlugin(),
  ],
};