react-scripts lite

webpack.config.js

require('dotenv/config');
const fs = require('fs-extra');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

fs.emptyDirSync(__dirname + '/build');
fs.copySync(__dirname + '/public/', __dirname + '/build/', {
  dereference: true,
  filter: file => file !== __dirname + '/public/index.html' && file !== __dirname + '/public/customers',
});

const env = {
  ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^REACT_APP_/i.test(k))),
  NODE_ENV: process.env.NODE_ENV || 'development',
  PUBLIC_URL: process.env.PUBLIC_URL,
  FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
};


module.exports = {
  mode: 'production',
  // entry: __dirname + '/src/index.js',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js',
    publicPath: process.env.PUBLIC_URL?.replace(/$(?<!\/)/, '/') || '/',
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [require('@babel/preset-react').default, { runtime: 'automatic' }],
              [require('@babel/preset-env').default, {
                targets: {
                  // browsers: 'last 1 chrome version',
                  node: 'current',
                }
              }],
              require('@babel/preset-typescript').default,
            ],
            plugins: [
              require('@babel/plugin-proposal-numeric-separator').default,
              [require('@babel/plugin-proposal-class-properties').default, { loose: true }],
              require('@babel/plugin-proposal-optional-chaining').default,
              require('@babel/plugin-proposal-nullish-coalescing-operator').default,
            ],
            babelrc: false,
            configFile: false,
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: "$fa-font-path: '../node_modules/@fortawesome/fontawesome-pro/webfonts';"
            }
          }
        ],
        sideEffects: true
      },
      {
        test: /\.(svg|jpe?g|png|woff2?|eot|ttf)$/,
        loader: 'file-loader',
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.ts', '.json'],
    modules: [
      'node_modules',
      __dirname + '/node_modules',
      __dirname + '/src',
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: __dirname + '/public/index.html',
    }),
    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env),
    new webpack.DefinePlugin({
      'process.env': Object.fromEntries(Object.entries(env).map(([k, v]) => [k, JSON.stringify(v)]))
    }),
    new MiniCssExtractPlugin({
      filename: 'bundle.css',
    }),
  ],
  optimization: {
    minimize: false
  },
  node: {
    module: 'empty',
    dgram: 'empty',
    dns: 'mock',
    fs: 'empty',
    http2: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  bail: true,
};

module.exports = config;

if (require.main === module) {
  const compiler = webpack(config);
  compiler.run((err, stats) => {
    console.log(Object.keys(stats.compilation));
    console.log(stats.compilation.emittedAssets);
    console.error(...stats.compilation.errors);
    if (err) throw err;
  });
}