webpack configs

Author: devloop01

webpack.common.js

@@ -0,0 +1,59 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = {
+	entry: {
+		index: "./src/js/index.js",
+	},
+
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				use: "babel-loader",
+				exclude: /node_modules/,
+			},
+
+			{
+				test: /\.css$/,
+				use: [MiniCssExtractPlugin.loader, "css-loader"],
+			},
+			{
+				test: /\.scss$/,
+				use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+			},
+			{
+				test: /\.html$/,
+				loader: "html-loader",
+			},
+			{
+				test: /\.(png|jpe?g|gif|svg)$/i,
+				loader: "file-loader",
+				options: {
+					name: "[name].[ext]",
+					outputPath: "images/",
+					esModule: false,
+				},
+			},
+
+			{
+				test: /\.glsl$/,
+				use: ["raw-loader", "glslify-loader"],
+			},
+		],
+	},
+
+	plugins: [
+		new HtmlWebpackPlugin({
+			filename: "index.html",
+			template: "index.html",
+			inject: true,
+			chunks: ["index"],
+			hash: true,
+		}),
+		new MiniCssExtractPlugin({
+			filename: "styles/[name].css",
+			chunkFilename: "[id].css",
+		}),
+	],
+};

webpack.dev.js

@@ -0,0 +1,15 @@
+const path = require("path");
+const common = require("./webpack.common");
+const { merge } = require("webpack-merge");
+
+module.exports = merge(common, {
+	mode: "development",
+	output: {
+		filename: "scripts/[name].js",
+		path: path.resolve(__dirname, "dist"),
+	},
+	devServer: {
+		port: 8080,
+		stats: "errors-only",
+	},
+});

webpack.prod.js

@@ -0,0 +1,11 @@
+const path = require("path");
+const common = require("./webpack.common");
+const { merge } = require("webpack-merge");
+
+module.exports = merge(common, {
+	mode: "production",
+	output: {
+		filename: "scripts/[name].js",
+		path: path.resolve(__dirname, "dist"),
+	},
+});