webpack.config.js

const path = require("path");
const webpack = require("webpack");
const aliases = require("./webpack-aliases");
const Config = require("./server/lib/config");

/*
 * 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/
 *
 */

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

/*
 * We"ve enabled HtmlWebpackPlugin for you! This generates a html
 * page for you when you compile webpack, which will make you start
 * developing and prototyping faster.
 *
 * https://github.com/jantimon/html-webpack-plugin
 *
 */

const mode = Config.app.isDevelopment ? "development" : "production";
const entry = ["./app/app.js"];

const plugins = [
	new webpack.ProgressPlugin(),
	new HtmlWebpackPlugin({
		inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
		filename: Config.paths.indexFile.name,
		template: Config.paths.indexFile.template,
	}),
	// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
	// inside your code for any environment checks; UglifyJS will automatically
	// drop any unreachable code.
	new webpack.EnvironmentPlugin({
		// Necessary environment variables for shared-lib/config
		NODE_ENV: Config.app.environment,
		STATIC_CONTENT_URL: null,

		// Necessary environment variables for social media login integration
		CREDENTIALS_FACEBOOK_IS_ENABLED: Config.auth.facebook.isEnabled || false,
		CREDENTIALS_GOOGLE_IS_ENABLED: Config.auth.google.isEnabled || false,
		CREDENTIALS_TWITTER_IS_ENABLED: Config.auth.twitter.isEnabled || false,
	}),
];

let devtool;

if (Config.app.isDevelopment) {
	entry.unshift(
		"eventsource-polyfill", // Necessary for hot reloading with IE
		"webpack-hot-middleware/client?reload=true",
	);

	plugins.push(new webpack.HotModuleReplacementPlugin());

	devtool = "eval-source-map";
}

module.exports = {
	mode,
	target: "web",
	entry,

	output: {
		filename: "[name].[hash].js",
		path: path.resolve(__dirname, "dist"),
		publicPath: "/static",
	},

	plugins,

	module: {
		rules: [
			{
				test: /.(js|jsx)$/,
				include: [path.resolve(__dirname, "app")],
				loader: "babel-loader",
			},

			{
				test: /\.css$/,
				exclude: /node_modules/,
				use: [
					"style-loader",
					{
						loader: "css-loader",
						options: {
							sourceMap: true,
						},
					},
				],
			},

			{
				test: /\.css$/,
				include: /node_modules/,
				use: [
					"style-loader",
					"css-loader",
				],
			},

			{
				test: /\.json$/,
				exclude: /node_modules/,
				use: "json-loader",
			},

			{
				test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
				use: "file-loader",
			},
		]
	},

	resolve: {
		alias: aliases,
	},

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

			chunks: "async",
			minChunks: 1,
			minSize: 30000,
			name: true
		}
	},

	node: {
		fs: "empty",
	},

	devtool,
};