lemmy-ui/webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const nodeExternals = require('webpack-node-externals');
const path = require('path');

module.exports = function (env, _) {
  const base = {
    // mode: "production",
    mode: 'development',
    entry: './src/server/index.tsx', // Point to main file
    output: {
      path: path.resolve(process.cwd(), 'dist'),
      filename: 'js/server.js',
      publicPath: '/',
    },
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    performance: {
      hints: false,
    },
    module: {
      rules: [
        {
          test: /\.(scss|css)$/i,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            {
              loader: 'postcss-loader', // Run post css actions
              options: {
                plugins: function () {
                  // post css plugins, can be exported to postcss.config.js
                  return [require('precss'), require('autoprefixer')];
                },
              },
            },
            'sass-loader',
          ],
        },
        {
          test: /\.(js|jsx|tsx|ts)$/, // All ts and tsx files will be process by
          loaders: 'babel-loader', // first babel-loader, then ts-loader
          exclude: /node_modules/, // ignore node_modules
        },
      ],
    },
    devServer: {
      host: '0.0.0.0',
      contentBase: 'src/',
      historyApiFallback: true,
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'styles/styles.css',
      }),
    ],
  };

  // server-specific configuration
  if (env.platform === 'server') {
    base.target = 'node';
    base.externals = [nodeExternals()];
  }
  // client-specific configurations
  if (env.platform === 'client') {
    base.entry = './src/client/index.tsx';
    base.output.filename = 'js/client.js';
  }
  return base;
};