Wordpress Theme Webpack Boilerplate

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const StyleLintPlugin = require("stylelint-webpack-plugin");
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ImageminPlugin = require("imagemin-webpack-plugin").default;
const TerserPlugin = require("terser-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

const { NODE_ENV: mode = "development" } = process.env;
const isProd = "production" === mode;

module.exports = {
	mode,
	entry: {
		"assets/js/main": "./src/js/index.js",
		"assets/css/main": "./src/scss/style.scss"
	},
	output: {
		path: path.resolve(__dirname, "./build"),
		filename: "[name].js"
	},
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "src")
		}
	},
	devtool: isProd ? "cheap-eval-source-map" : "source-map",
	optimization: {
		minimize: true,
		minimizer: [
			new TerserPlugin({
				sourceMap: true
			})
		]
	},
	module: {
		rules: [
			{
				enforce: "pre",
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: [
					{
						loader: "eslint-loader",
						options: {
							fix: true,
							emitWarning: true
						}
					}
				]
			},
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: [
					{
						loader: "babel-loader"
					}
				]
			},
			{
				test: /\.s?(a|c)ss$/,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: "css-loader",
						options: {
							sourceMap: true
						}
					},
					{
						loader: "postcss-loader",
						options: {
							sourceMap: true
						}
					},
					{
						loader: "sass-loader",
						options: {
							sourceMap: true
						}
					}
				]
			},
			{
				test: /\.(png|jpg|gif)$/,
				use: [
					{
						loader: "file-loader",
						options: {
							publicPath: "../images", // relative to output js
							outputPath: "assets/images",
							name: "[name].[ext]"
						}
					}
				]
			},
			{
				test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
				exclude(modulePath) {
					return !/fonts/.test(modulePath);
				},
				use: [
					{
						loader: "file-loader",
						options: {
							esModule: false,
							publicPath: "../fonts", // relative to output css
							outputPath: "assets/fonts",
							name: "[name].[ext]"
						}
					}
				]
			},
			{
				test: /\.(svg)$/,
				exclude: /fonts/,
				use: [
					{
						loader: "file-loader",
						options: {
							publicPath: "../images",
							outputPath: "assets/images", // relative to output css
							name: "[name].[ext]"
						}
					},
					{
						loader: "svgo-loader",
						options: {
							plugins: [
								{ removeTitle: false },
								{ convertColors: { shorthex: false } },
								{ convertPathData: false },
								{ removeViewBox: false }
							]
						}
					}
				]
			}
		]
	},
	plugins: [
		!isProd &&
			new FriendlyErrorsPlugin({
				clearConsole: false
			}),
		new StyleLintPlugin({
			files: "src/**/*.s?(a|c)ss",
			fix: true,
			failOnError: false,
			syntax: "scss"
		}),
		new MiniCssExtractPlugin({
			filename: "[name].css"
		}),
		isProd &&
			new ImageminPlugin({
				test: /\.(jpe?g|png|gif)$/i,
				cacheFolder: "./imgcache"
			}),
		new CopyPlugin([
			{
				from: "src/theme",
				to: ".",
				ignore: [".DS_Store"]
			}
		]),
		new CleanWebpackPlugin({
			cleanStaleWebpackAssets: false
		})
	].filter(Boolean)
};