JSFiddle - React, Tailwind, and code Playground

JavaScript

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const _ = require('lodash');

const isProduction = process.env.NODE_ENV === 'prod';
const nowEnv = isProduction? 'prod' : 'dev';

const paths = {
  base: path.join(__dirname, 'config/webpack.base.js'),
  dev: path.join(__dirname, 'config/webpack.dev.js'),
  prod: path.join(__dirname, 'config/webpack.prod.js')
};

const baseConfig = require(paths.base);
const enhancedConfig = require(paths[nowEnv]);

const config = _.merge(baseConfig, enhancedConfig);

module.exports = config;

// webpack.dev.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  output: {
    pathinfo: true,
    filename: 'bundle.js'
  },

  performance: {
    hints: 'warning'
  },

  devtool: "source-map",

  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    },
    watchContentBase: true,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    },
    contentBase: path.join(__dirname, '../client'),
    compress: true, // enable gzip compression
    historyApiFallback: true,
    hot: true,
    inline: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}