webpack.config.js

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

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

/*
 * We've enabled MiniCssExtractPlugin for you. This allows your app to
 * use css modules that will be moved into a separate CSS file instead of inside
 * one of your module entries!
 *
 * https://github.com/webpack-contrib/mini-css-extract-plugin
 *
 */

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

/*
 * SplitChunksPlugin is enabled by default and replaced
 * deprecated CommonsChunkPlugin. It automatically identifies modules which
 * should be splitted of chunk by heuristics using module duplication count and
 * module category (i. e. node_modules). And splits the chunks…
 *
 * It is safe to remove "splitChunks" from the generated configuration
 * and was added as an educational example.
 *
 * https://webpack.js.org/plugins/split-chunks-plugin/
 *
 */

module.exports = {
	module: {
		rules: [
			{
				include: [path.resolve(__dirname, 'src')],
				loader: 'babel-loader',

				options: {
					plugins: ['syntax-dynamic-import'],

					presets: [
						'@babel/preset-typescript',
						'@babel/preset-react',
						'@babel/preset-env',
					]
				},

				test: /\.(js|ts)$/
			},
			{
				test: /\.(scss|css)$/,

				use: [
					{
						loader: 'style-loader',
					},
					{
						loader: 'css-loader',

						options: {
							sourceMap: true
						}
					},
					{
						loader: 'postcss-loader', // Run post css actions
						options: {
							plugins: function () { // post css plugins, can be exported to postcss.config.js
								return [
									require('precss'),
									require('autoprefixer')
								];
							}
						}
					},
					{
						loader: 'sass-loader',

						options: {
							sourceMap: true
						}
					}
				]
			},
			{ test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] },
			{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] },
		],
	},

	mode: 'production',

	optimization: {
		splitChunks: {
			cacheGroups: {
				vendors: {
					priority: -10,
					test: /[\\/]node_modules[\\/]/
				}
			},

			chunks: 'async',
			minChunks: 1,
			minSize: 30000,
			name: false
		}
	},

	plugins: [
		new CleanWebpackPlugin(['dist']),
		new CopyWebpackPlugin([
			{ from: '_headers', to: '.', },
			{ from: '_redirects', to: '.', },
		]),
		new HtmlWebpackPlugin({
			template: 'src/index.html',
			title: 'abcbin',
		}),
	],

	entry: {
		main: './src/index.js',
	},

	output: {
		filename: '[name].bundle.js',
		chunkFilename: '[name].bundle.js',
	},

	node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
  }
};