react-dropit/dev-server/dev-server.js

Uploading files is now easier :))

var path = require('path'),
	webpack = require('webpack'),
	webpackStream = require('webpack-stream'),
	UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
	gulp = require('gulp'),
	HtmlWebpackPlugin = require('html-webpack-plugin'),
	WebpackDevServer = require('webpack-dev-server');


const PORT = process.env.NODE_PORT || 3000

class Gulp {

	source () {

		return path.resolve(__dirname, 'app.jsx')
	}

	definePlugins () {

		const plugins = [

			new HtmlWebpackPlugin({
				filename: 'index.html',
				template: path.resolve(__dirname, `index_template.html`)
			}),
			new webpack.NamedModulesPlugin(),
			new webpack.HotModuleReplacementPlugin(),
			new webpack.ProvidePlugin({
				React: 'react',
				ReactDOM: 'react-dom',
				im: 'immutable',
			})
		]

		return plugins
	}

	defineAlias () {

		const alias = {
			
		}

		return alias
	}

	getEntries () {

		return [
			'webpack-dev-server/client?http://localhost:' + PORT,
			'webpack/hot/only-dev-server',
			'react-hot-loader/patch',
			this.source()
		]
	}

	webpackConfig () {

		return {

			mode: 'development',
			entry: this.getEntries(),
			watch: this.watch,
			output: {
				path: path.resolve(process.cwd(), 'public'),
				publicPath: '/',
				filename:  'index.js'
			},
			module: {

				rules: [
					{
						test: /\.mjs$/,
						include: /node_modules/,
						type: "javascript/auto",
					},
					{
						test: /\.jsx?$/,
						exclude: /node_modules/,
						loader: 'babel-loader'
					},

					{
						test: /\.s?css$/,
						exclude: /node_modules/,
						use: [
							"style-loader", // creates style nodes from JS strings
							"css-loader", // translates CSS into CommonJS
							"sass-loader" // compiles Sass to CSS, using Node Sass by default
						]
					}
				]
			},

			resolve: {
				extensions: ['.js', '.jsx', '.scss'],
				alias: this.defineAlias()
			},

			plugins: this.definePlugins(),

			optimization: {
				removeAvailableModules: false,
				minimizer: [
					new UglifyJsPlugin()
				],
				removeEmptyChunks: true
			}
		}
	}

	webpackDevServer () {

		// Start a webpack-dev-server
		new WebpackDevServer(webpack(this.webpackConfig()), {
			stats: {
				colors: true
			},
			compress: true,
			hot: true,
			publicPath: '/',
			inline:  true,
			watchContentBase: true,

		}).listen(PORT, function (err) {

			console.log('webpack dev server port: ', PORT)

			if (err) {
				console.log(err)
			}
		});
	}
	
	run () {

		this.webpackDevServer()
	}
}

module.exports = new Gulp