index.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const devMode = process.env.NODE_ENV !== 'production';
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
	entry: {
		// vendor: ['react', 'react-dom'],
		app: "./assets/src"
	},
	output: {
		// options related to how webpack emits results

		path: path.resolve(__dirname, "public/dist"), // string
		// the target directory for all output files
		// must be an absolute path (use the Node.js path module)

		// filename: "app.js", // string
		// the filename template for entry chunks

		// publicPath: "/assets/", // string
		// // the url to the output directory resolved relative to the HTML page

		// library: "MyLibrary", // string,
		// the name of the exported library
		// chunkFilename: 'app.js',
		// libraryTarget: "umd", // universal module definition
		// the type of the exported library

		/* Advanced output configuration (click to show) */
	},

	optimization: {
		splitChunks: {
			cacheGroups: {
				default: false,
				// Custom common chunk
				bundle: {
					name: 'commons',
					chunks: 'all',
					minChunks: 3,
					reuseExistingChunk: false,
				},
				// Customer vendor
				vendors: {
					chunks: 'initial',
					name: 'vendors',
					test: 'vendors',
				},
				// Merge all the CSS into one file
				styles: {
					name: 'styles',
					test: /\.s?css$/,
					chunks: 'all',
					minChunks: 1,
					reuseExistingChunk: true,
					enforce: true,
				},
			},
		},
		minimizer: [
			new UglifyJsPlugin({
				uglifyOptions: {
					beautify: false,
					mangle: {
						keep_fnames: true
					},
					compress: {
						drop_console: false
					},
					comments: false
				}
			}),

		]
	},
	plugins: [
		new CleanWebpackPlugin(['public/dist/*.*']),
		new HtmlWebPackPlugin({
			template: "./assets/public/index.html",
			filename: "./index.html"
		}),
		new MiniCssExtractPlugin({
			filename: devMode ? '[name].css' : '[name].css',
			chunkFilename: devMode ? '[id].css' : '[id].css'
		}),
		new webpack.NamedModulesPlugin(),
		new webpack.HotModuleReplacementPlugin(),
		new OptimizeCSSAssetsPlugin({}),
		new ManifestPlugin()
	],
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader"
				}
			},
			{
				test: /\.json$/,
				loader: 'json-loader',
				type: 'javascript/auto',
				exclude: /node_modules/,
			},
			{
				test: /\.html$/,
				exclude: /node_modules/,
				use: [
					{
						loader: "html-loader",
						options: {minimize: true}
					}
				]
			},
			{
				test: /\.s?css$/,
				use: [
					devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
					'css-loader',
					'sass-loader',
				],
			}
		]
	},

	devtool: 'inline-source-map',
	resolve: {
		extensions: [".js", ".jsx", ".json", ".scss", ".css"]
	},
	devServer: {
		port: 9000,
		stats: {
			colors: true
		},
		hot: true,
		proxy: {
			'/api/v1': 'http://localhost:8080/'
		}
	}
};