webpack.config.js

const path = require('path');
const dotenv = require('dotenv');
const HtmlWebpackPlugin = require('html-webpack-plugin');

dotenv.config();
const { CLIENT_PORT, SERVER_PORT } = process.env;

const mode = process.env.NODE_ENV; // our environment variables are accessible via process.env
// the && here means run both of these commands (order matters) in package json
// console.log('mode set by environment variable: ', mode);

module.exports = {
  // Fix for regenerator-runtime issue
  entry: ['regenerator-runtime/runtime.js', './src/client/index.jsx'],
  // NOTE: webpack will create the build directory for us
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js',
  },
  mode,
  // Production compresses the data, not typical in development, Changing to development
  // allows us to then use webpack dev server that enables hot reloading
  // NOTE: you could have rules for different modules, but here we're applying the same
  // rule everywhere
  devServer: {
    host: 'localhost',
    port: CLIENT_PORT,
    // enable HMR on the devServer
    hot: true,
    // fallback to root for other urls
    // historyApiFallback: true,

    static: {
      // match the output path
      directory: path.resolve(__dirname, 'dist'), // If we are running development mode, we are ignoring the output: {} method and just serve the static path.
      // match the output 'publicPath'
      publicPath: '/',
    },
    proxy: {
      // uncomment the proxy method to allow the frontend to communicate with the proxy
      '/': `http://localhost:${SERVER_PORT}/`,
    },
  },
  // NOTE: resolve allows you to not have to specify file extensions when importing
  resolve: {
    modules: [__dirname, 'src', 'node_modules'],
    extensions: ['*', '.js', '.jsx'],
  },
  // exclude node_modules?)
  module: {
    rules: [
      {
        // NOTE: we use a regex to find js or jsx files
        // alternative: /\.jsx?/
        // NOTE: we want to exclude the node_modules since we believe that
        // they already include a minified and uglified file in their dist directory
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        // The definition says css-loader interprets @import and url() like import/require()
        // and will resolve them. What do we mean by this? css-loader will take all the CSS from
        // the CSS file and generate it to a single string and will pass this to style-loader.
        // style-loader will take this string and will embed it in the style tag in index.html.
        test: /.(css)$/,
        exclude: /node_modules/, // webpack is aware of the minified, uglified js and knows to grab that file, so we can exclude it here
        use: ['style-loader', 'css-loader', 'sass-loader'], // order by which you place your css loaders matters //
      },
      // {
      //   test: /\.png$/,
      //   use: [{
      //     loader: 'url-loader',
      //     options: {
      //       mimetype: 'image/png',
      //     },
      //   }],
      // },
      {
        test: /\.png|svg|jpe?g|gif/,
        use: ['file-loader'],
      },
    ],
  },
  plugins: [
    // HtmlWebpackPlugin will take the bundle.js file and insert it inline into a
    // index.html file inside the dist/build directory. You can pass in a template page
    new HtmlWebpackPlugin({
      template: './src/client/index.html', // yes, htmlWebpack only works in development// index html is placed in root in RAM because it is a feature of setting the mode as development.
      favicon: './public/yawp-chat-logo.png'
    }),
  ],
};