update webpack config

Author: szaleq

config/webpack.config.js

@@ -1,51 +1,53 @@
 /**
  * External dependencies
  */
-const { sync: readPkgUp } = require("read-pkg-up");
-const LiveReloadPlugin = require("webpack-livereload-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const path = require("path");
-const { existsSync, lstatSync, readdirSync, realpathSync } = require("fs");
+const { existsSync, lstatSync, readdirSync, realpathSync } = require('fs');
+const { sync: readPkgUp } = require('read-pkg-up');
+const globImporter = require('node-sass-glob-importer');
+const LiveReloadPlugin = require('webpack-livereload-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
 
 /**
  * WordPress dependencies
  */
-const DependencyExtractionWebpackPlugin = require("@wordpress/dependency-extraction-webpack-plugin");
+const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
 
 /**
  * Internal dependencies
  */
-const RemoveSuprefluousAssetsPlugin = require("../plugins/remove-superfluous-assets");
+const RemoveSuprefluousAssetsPlugin = require('../plugins/remove-superfluous-assets');
 const {
 	getArg,
 	getScriptsConfig,
 	hasArg,
 	hasBabelConfig,
 	hasFileArg,
-	hasPostCSSConfig
-} = require("../utils");
+	hasPostCSSConfig,
+} = require('../utils');
 
 const { path: pkgPath } = readPkgUp({
-	cwd: realpathSync(process.cwd())
+	cwd: realpathSync(process.cwd()),
 });
 
 const config = getScriptsConfig();
 
 const paths = Object.assign(
 	{
-		src: "src/assets",
-		output: "dist",
-		scripts: "js",
-		styles: "scss",
-		images: "images"
+		src: 'src/assets',
+		output: 'dist',
+		scripts: 'js',
+		styles: 'scss',
+		images: 'images',
+		fonts: 'fonts',
 	},
 	config && config.paths ? config.paths : {}
 );
 
 for (const pathKey in paths) {
 	let pathValue = getArg(`--${pathKey}-path`, paths[pathKey]);
 
-	if (["src", "output"].includes(pathKey) && "/" !== pathValue.charAt(0)) {
+	if (['src', 'output'].includes(pathKey) && '/' !== pathValue.charAt(0)) {
 		pathValue = path.join(path.dirname(pkgPath), pathValue);
 	}
 
@@ -58,7 +60,7 @@ const entry = {};
 if (!hasFileArg()) {
 	if (!existsSync(paths.src)) {
 		/* eslint-disable-next-line no-console */
-		console.log("Source directory does not exist.");
+		console.log('Source directory does not exist.');
 		process.exit(1);
 	}
 
@@ -68,9 +70,9 @@ if (!hasFileArg()) {
 		const ext = path.extname(file);
 		const name = path.basename(file, ext);
 
-		if ("_" !== name.charAt(0)) {
+		if ('_' !== name.charAt(0)) {
 			const filePath = path.join(srcPath, file);
-			outputPath = outputPath.replace("scss", "css");
+			outputPath = outputPath.replace('scss', 'css');
 
 			if (lstatSync(filePath).isFile()) {
 				entry[`${outputPath}/${name}`] = filePath;
@@ -81,7 +83,7 @@ if (!hasFileArg()) {
 	const directoryErrors = [];
 	let hasDirectory = false;
 
-	for (const assetType of ["scripts", "styles"]) {
+	for (const assetType of ['scripts', 'styles']) {
 		if (false === paths[assetType]) {
 			continue;
 		}
@@ -100,7 +102,7 @@ if (!hasFileArg()) {
 
 		hasDirectory = true;
 
-		readdirSync(srcPath).forEach(file =>
+		readdirSync(srcPath).forEach((file) =>
 			addEntry(file, srcPath, paths[assetType])
 		);
 	}
@@ -118,114 +120,162 @@ if (!hasFileArg()) {
 
 	if (!entry) {
 		/* eslint-disable-next-line no-console */
-		console.log("No entry files available.");
+		console.log('No entry files available.');
 		process.exit(1);
 	}
 }
 
 const mode = getArg(
-	"--mode",
-	process.env.NODE_ENV === "production" ? "production" : "development"
+	'--mode',
+	process.env.NODE_ENV === 'production' ? 'production' : 'development'
 );
-const isProduction = "production" === mode;
+const isProduction = 'production' === mode;
+
+const imageWebpackLoaderConfig = {
+	loader: 'image-webpack-loader',
+	options: {
+		disable: false === config.imagemin,
+		...('object' === typeof config.imagemin && config.imagemin),
+	},
+};
 
 module.exports = {
 	mode,
 	context,
 	entry,
 	output: {
 		path: paths.output,
-		filename: "[name].js",
-		publicPath: "../"
+		filename: '[name].js',
+		publicPath: '../',
 	},
-	devtool: isProduction ? false : "source-map",
+	devtool: isProduction ? false : 'source-map',
 	module: {
 		rules: [
 			{
 				test: /\.js$/,
 				exclude: /node_modules/,
 				use: [
-					require.resolve("thread-loader"),
+					require.resolve('thread-loader'),
 					{
-						loader: require.resolve("babel-loader"),
+						loader: require.resolve('babel-loader'),
 						options: {
 							// Babel uses a directory within local node_modules
 							// by default. Use the environment variable option
 							// to enable more persistent caching.
-							cacheDirectory: process.env.BABEL_CACHE_DIRECTORY || true,
+							cacheDirectory:
+								process.env.BABEL_CACHE_DIRECTORY || true,
 							...(!hasBabelConfig() && {
 								babelrc: false,
 								configFile: false,
-								presets: [require.resolve("@wordpress/babel-preset-default")]
-							})
-						}
-					}
-				]
+								presets: [
+									require.resolve(
+										'@wordpress/babel-preset-default'
+									),
+								],
+							}),
+						},
+					},
+				],
 			},
 			{
 				test: /\.scss$/,
 				use: [
 					MiniCssExtractPlugin.loader,
 					{
-						loader: "css-loader",
+						loader: 'css-loader',
 						options: {
 							importLoaders: 2,
-							sourceMap: true
-						}
+							sourceMap: true,
+						},
 					},
 					{
-						loader: "postcss-loader",
+						loader: 'postcss-loader',
 						options: {
 							sourceMap: true,
 							...(!hasPostCSSConfig() && {
-								plugins: () => [require("autoprefixer")]
-							})
-						}
+								postcssOptions: {
+									plugins: () => [require('autoprefixer')],
+								},
+							}),
+						},
 					},
 					{
-						loader: "sass-loader",
+						loader: 'sass-loader',
 						options: {
-							sourceMap: true
-						}
-					}
-				]
-			},
-			{
-				test: /\.svg$/,
-				issuer: {
-					test: /\.jsx?$/
-				},
-				use: ["@svgr/webpack"]
+							sassOptions: {
+								importer: [globImporter()],
+							},
+							sourceMap: true,
+						},
+					},
+				],
 			},
 			{
-				test: /\.(png|svg|jpg|gif)$/,
-				use: [
+				test: /\.(png|svg|jpe?g|gif)$/,
+				oneOf: [
 					{
-						loader: "url-loader",
-						options: {
-							limit: config.urlLoader ? config.urlLoader : false,
-							name: "[name].[ext]",
-							outputPath: paths.images
-						}
+						issuer: /\.(ts|tsx|js|jsx)$/,
+						resourceQuery: { not: /inline/ },
+						test: /\.svg$/,
+						type: 'javascript/auto',
+						use: [
+							'@svgr/webpack',
+							{
+								loader: 'url-loader',
+								options: {
+									limit: config.inlineAssets
+										? config.inlineAssets
+										: false,
+									name: '[hash].[ext]',
+									outputPath: paths.images,
+								},
+							},
+							imageWebpackLoaderConfig,
+						],
 					},
 					{
-						loader: "image-webpack-loader",
-						options: {
-							disable: false === config.imagemin,
-							...("object" === typeof config.imagemin && config.imagemin)
-						}
-					}
-				]
-			}
-		]
+						resourceQuery: { not: /inline/ },
+						generator: {
+							filename: `${paths.images}/[hash][ext][query]`,
+						},
+						type:
+							config.inlineAssets === false
+								? 'asset'
+								: 'asset/resource',
+						use: [imageWebpackLoaderConfig],
+						...(Number.isInteger(config.inlineAssets) && {
+							parser: {
+								dataUrlCondition: {
+									maxSize: config.inlineAssets,
+								},
+							},
+						}),
+					},
+					{
+						resourceQuery: /inline/,
+						type: 'asset/inline',
+						use: [imageWebpackLoaderConfig],
+					},
+				],
+			},
+			{
+				test: /\.(woff|woff2|eot|ttf|otf)$/i,
+				type: 'asset/resource',
+				generator: {
+					filename: `${paths.fonts}/[hash][ext][query]`,
+				},
+			},
+		],
 	},
 	plugins: [
 		new MiniCssExtractPlugin({
-			filename: "[name].css"
+			filename: '[name].css',
 		}),
-		!hasArg("--no-deps") &&
-			new DependencyExtractionWebpackPlugin({ injectPolyfill: true }),
+		!hasArg('--no-deps') &&
+			new DependencyExtractionWebpackPlugin({
+				injectPolyfill: true,
+			}),
 		new RemoveSuprefluousAssetsPlugin(),
-		!isProduction && new LiveReloadPlugin()
-	].filter(Boolean)
+		!isProduction && new LiveReloadPlugin(),
+	].filter(Boolean),
 };