JSFiddle - React, Tailwind, and code Playground

JavaScript

const path = require('path');
const webpack = require('webpack');

const devBuild = process.env.NODE_ENV !== 'production';
const nodeEnv = devBuild ? 'development' : 'production';

module.exports = {
context: __dirname + '/src', // `__dirname` is root of project and `src` is source
entry: { 
	app: [
	'./main.jsx',
	],
	vendor: [
	'react',
	'react-dom',
	],
},
output: {
	filename: '[name]-bundle.js',
	path: path.join(__dirname, '/dist'),
},
resolve: {
	extensions: ['.js', '.jsx'],
},  
plugins: [
new webpack.DefinePlugin({
	'process.env': {
		NODE_ENV: JSON.stringify(nodeEnv),
	},
}),

// https://webpack.github.io/docs/list-of-plugins.html#2-explicit-vendor-chunk
new webpack.optimize.CommonsChunkPlugin({
// This name 'vendor' ties into the entry definition
name: 'vendor',
// We don't want the default vendor.js name
filename: 'vendor-bundle.js',
// Passing Infinity just creates the commons chunk, but moves no modules into it.
// In other words, we only put what's in the vendor entry definition in vendor-bundle.js
minChunks: Infinity,
}),
],
module: {
	rules: [
		{
			test: /.jsx?$/,
			exclude: /node_modules/,
			include: path.join(__dirname, 'src'),
			use: [
				{
					loader: 'babel-loader',
					options: {
						babelrc: false,
						plugins: ["transform-class-properties"],
						presets: [
						['es2015', { modules: false }],
						'react',
						],
					}
				},
			]
		},
		{
	        test: require.resolve('jquery'),
	        use: [{
				loader: 'expose-loader',
				options: 'jQuery'
	          },{
				loader: 'expose-loader',
				options: '$'
	        }]
      	}
	],
},
};