webpack.config.development.js.NOTUSED

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


const port = process.env.PORT || 3000;

module.exports = {
	// Webpack configuration goes here

	/*
	 mode tells Webpack this configuration will be for either development or
	 production. “Development Mode [is] optimized for speed and developer
	 experience while Production defaults will give you a set of defaults
	 useful for deploying your application.
	 See:
	 https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
	 */
	mode: 'development',

	/* entry: Specifies the entry point of your application; this
	 is where the React app lives and where the bundling process
	 will begin. babel-polyfill is here because that's where the
	 docs for it tell me to add it (to make it globally availble)
	 */
	entry: {
		// Split out the vendor module, as its a big boy
		vendor: ['semantic-ui-react'],
		app: ['babel-polyfill', './src/index.js'],
	},

	/* output: Tells Webpack how to write the compiled files to disk.
	 Note that the webpack-development-server keeps everything in memory */

	output: {
		/* filename: This will be the filename of the bundled application.
		 The [hash] portion of the filename will be replaced by a hash generated by
		 Webpack every time your application changes and is recompiled (helps with
		 caching). */
		filename: '[name].[hash].js',

		/* publicPath is an important option when using on-demand-loading or
		   loading external resources like images, files, etc. If an incorrect
		   value is specified you'll receive 404 errors while loading these
		   resources. And Hot reloading won’t work as expected for nested routes
		   without it */
		publicPath: '/',
	},

	/*
	 devtool will create source maps to help you with debugging of your application.
	 There are several types of source maps and this particular map
	 (inline-source-map) is to be used only in development. A SourceMap is added as a
	 DataUrl to the bundle. See the docs:
	 https://webpack.js.org/configuration/devtool/
	 */
	devtool: 'inline-source-map',

	/* Configuration of the web dev server (wds) */
	devServer: {
		host: 'localhost',
		port: port, // eslint-disable-line 
		historyApiFallback: true, // When using the HTML5 History API, the index.html
		// page will likely have to be served in place of any
		// 404 responses.
		open: true, // Open the web browser when the dev server starts
		// stats: "errors-only", Display only errors to reduce the amount of output.
		overlay: true, // Enable error overlay on the output
		hot: true, // Enable HMR on the server
		watchContentBase: true,
	},

	/* Module: What types of modules your application will include, in our case we
	 will support ESNext (Babel) and CSS Modules.

	 rules: How we handle each different type of module. Here is how rules usually work:
	 {
		test: /\.YOUR_FILE_EXTENSION$/,
		exclude: /SOMETHING THAT IS THAT EXTENSION BUT SHOULD NOT BE PROCESSED/,
		use: {
		  loader: "loader for your file extension  or a group of loaders"
		}
}
	 */
	module: {
		rules: [

			// First Rule, test for .js and .jsx files (I prefer using .jsx)
			{
				test: /\.js|.jsx?$/,

				// Don't allow the babel-loader to traverse the node_modules directory
				exclude: /node_modules/,

				/* The babel-loader will check in the .babelrc for the presets */
				use: ['babel-loader'],
			},

			// Second Rule

			/* test for CSS files with a .css extension. Here we use two loaders,
			   style-loader and css-loader, to handle our CSS files. Then we instruct
			   css-loader to use CSS Modules, camel case and create source maps.
			 */
			{
				test: /\.css$/,
				use: [
					{
						loader: 'style-loader',
					},
					{
						loader: 'css-loader',
						options: {
							/* CSS Modules and Camel Case:
							This gives us the ability to use import Styles from
							‘./styles.css’ syntax (or destructuring like this import
							{ style1, style2 } from ‘./styles.css’).

								 Then we can use it like this in a React app:

								 ...
								 <div className={Style.style1}>Hello World</div>
								 // or with the destructuring syntax
								 <div className={style1}>Hello World</div> */
							modules: true,
							/* Camel case gives us the ability to write our CSS rules like this:
								 .home-button {...}
								 And use it in our React files like this:
								 import { homeButton } from './styles.css' */
							camelCase: true,
							sourceMap: true,
						},
					},
				],
			},
		],
	},
	// This creates the index.html, using the ./src/index.html as a
	// starting template
	plugins: [
		/* Prints more readable module names in the browser terminal on HMR updates */
		new webpack.NamedModulesPlugin(),
		new webpack.HotModuleReplacementPlugin(),
		new HtmlWebpackPlugin({
			// With no arg, the plugin would attempt to create its own HTML file,
			// but we specify a template instead
			template: 'public/index.html',
			favicon: 'public/favicon.ico',
		}),
	],

	/*
	This makes sure the vendor bundle size is as small as possible. See
	https://github.com/webpack/webpack/issues/6357
	 */
	optimization: {
		splitChunks: {
			cacheGroups: {
				vendor: {
					chunks: 'initial',
					test: 'vendor',
					name: 'vendor',
					enforce: true,
				},
			},
		},
	},
};