webpack.config.js

const currentTask = process.env.npm_lifecycle_event
const path = require("path")
const Dotenv = require("dotenv-webpack")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackHarddiskPlugin = require("html-webpack-harddisk-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const TerserPlugin = require("terser-webpack-plugin")
const fse = require("fs-extra")

/*
  Making CSS part of our by just manually copying
  CSS file to the DIST folder. 
*/
class RunAfterCompile {
	apply(compiler) {
		compiler.hooks.done.tap("Copy files", function () {
			fse.copySync("./app/main.css", "./dist/main.css")

			/*
        If you needed to copy another file or folder
        such as your "images" folder, you could just
        call fse.copySync() as many times as you need
        to here to cover all of your files/folders.
      */
		})
	}
}

config = {
	entry: "./app/Main.js",
	output: {
		publicPath: "/",
		path: path.resolve(__dirname, "app"),
		filename: "bundled.js"
	},
	plugins: [
		new Dotenv(),
		new HtmlWebpackPlugin({
			filename: "index.html",
			template: "app/index-template.html",
			alwaysWriteToDisk: true
		}),
		new HtmlWebpackHarddiskPlugin()
	],
	mode: "development",
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /(node_modules)/,
				use: {
					loader: "babel-loader",
					options: {
						presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]],
						plugins: ["@babel/plugin-proposal-class-properties"]
					}
				}
			},
			{
				test: /\.(png|jpe?g|gif|svg)$/i,
				use: [
					{
						loader: "file-loader",
						options: {
							name: "[path][name].[ext]"
						}
					}
				]
			},
			{
				test: /\.(gltf)$/,
				use: [
					{
						loader: "gltf-webpack-loader"
					}
				]
			},
			{
				test: /\.(bin)$/,
				use: [
					{
						loader: "file-loader",
						options: {}
					}
				]
			}
		]
	}
}

if (currentTask == "webpackDev" || currentTask == "dev") {
	config.devtool = "source-map"
	config.devServer = {
		port: 3000,
		contentBase: path.join(__dirname, "app"),
		hot: true,
		historyApiFallback: { index: "index.html" }
	}
}

if (currentTask == "webpackBuild") {
	config.optimization = {
		minimize: true,
		minimizer: [
			new TerserPlugin({
				terserOptions: {
					keep_classnames: false,
					keep_fnames: true
				}
			})
		]
	}
	config.plugins.push(new CleanWebpackPlugin(), new RunAfterCompile())
	config.mode = "production"
	config.output = {
		publicPath: "/",
		path: path.resolve(__dirname, "dist"),
		filename: "[name].[chunkhash].js",
		chunkFilename: "[name].[chunkhash].js"
	}
}

module.exports = config