webpack.config.js

const path                    = require( 'path' );
const glob                    = require( 'glob' );
const defaultConfig           = require( "@wordpress/scripts/config/webpack.config" );
const MiniCssExtractPlugin    = require( 'mini-css-extract-plugin' );
const CssMinimizerPlugin      = require( "css-minimizer-webpack-plugin" );
const { hasBabelConfig }      = require( '@wordpress/scripts/utils' );
const TerserPlugin            = require( 'terser-webpack-plugin' );
const SpriteLoaderPlugin      = require( 'svg-sprite-loader/plugin' );
const UnminifiedWebpackPlugin = require( 'unminified-webpack-plugin' );
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

const isProduction = process.env.NODE_ENV === 'production';
const mode         = isProduction ? 'production' : 'development';

const BUILD_DIR = path.resolve( __dirname, 'assets' );

const filename = ext => isProduction ? ext + '/[name].min.' + ext : ext + '/[name].min.' + ext;

module.exports = {
	...defaultConfig,
	mode,
	devtool:      ! isProduction ? 'source-map' : false,
	//devtool:      ! isProduction ? false : false,
	entry: {
		main:                     path.resolve( process.cwd(), 'src/js', 'main.js' ),
		"reset-reactions-script": path.resolve( process.cwd(), 'src/js', 'reset-reactions.js' ),
		"search-live-script":     path.resolve( process.cwd(), 'src/js', 'search-live.js' ),
		"toc-script":             path.resolve( process.cwd(), 'src/js', 'toc-script.js' ),

		"global-style":          path.resolve( process.cwd(), 'src/scss', 'global-style.scss' ),
		"post-single-style":     path.resolve( process.cwd(), 'src/scss', 'post-single.scss' ),
		"reset-reactions-style": path.resolve( process.cwd(), 'src/scss', 'reset-reactions.scss' ),
		"search-live-style":     path.resolve( process.cwd(), 'src/scss', 'search-live.scss' ),
		"toc-style":             path.resolve( process.cwd(), 'src/scss', 'toc-style.scss' ),
		"featured-labels-menu":  path.resolve( process.cwd(), 'src/scss', 'featured-labels-menu.scss' ),
		"editor-style":          path.resolve( process.cwd(), 'src/scss', 'editor-style.scss' ),

		"sprite-svg": glob.sync( path.resolve( __dirname, 'src/icons/*.svg' ) ),
	},
	output:       {
		filename: filename( 'js' ),
		path:     BUILD_DIR,
		clean:    true
	},
	optimization: {
		minimize:  true,
		minimizer: [
			new CssMinimizerPlugin( {
				minimizerOptions: {
					preset: [
						"default",
						{ "discardComments": { "removeAll": true } }
					]
				},
			} ),
			new TerserPlugin( {
				extractComments: false,
			} ),
		]
	},
	module:       {
		rules: [
			{
				test:    /\.js$/,
				exclude: /node_modules/,
				use:     [
					require.resolve( 'thread-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,

							// Provide a fallback configuration if there's not
							// one explicitly available in the project.
							...(
								! hasBabelConfig() && {
									babelrc:    false,
									configFile: false,
									presets:    [ require.resolve( '@wordpress/babel-preset-default' ) ],
								}
							),
						},
					},
				],
			},
			{
				test:    /\.svg$/,
				include: path.resolve( __dirname, 'src/icons' ),
				use:     [
					{
						loader:  'svg-sprite-loader',
						options: {
							symbolId:       filePath => {
								return 'icon-' + path
									.basename( filePath )
									.replace( ".svg", "" )
									.toLowerCase();
							},
							extract:        true,
							spriteFilename: 'images/icons.svg',
							//publicPath: 'images'
						}
					},
					'svgo-loader'
				]
			},
			{
				test: /\.css$/i,
				use:  [ "style-loader", "css-loader" ],
			},
			{
				test:    /\.s[ac]ss$/i,
				exclude: /node_modules/,
				use:     [
					{
						loader: MiniCssExtractPlugin.loader,
					},
					{
						loader:  'css-loader',
						options: {
							sourceMap: ! isProduction,
						},
					},
					{
						loader:  'postcss-loader',
						options: {
							sourceMap: ! isProduction,
						},
					},
					{
						loader:  'sass-loader',
						options: {
							sourceMap: ! isProduction,
						},
					},
				],
			},
			{
				test:      /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
				include:   path.resolve( __dirname, 'src/images' ),
				exclude:   path.resolve( __dirname, 'src/icons' ),
				type:      'asset/resource',
				generator: {
					filename: "images/[name][ext]",
				},
			},
			{
				test:      /\.(woff|woff2|eot|ttf|otf|svg)$/i,
				include:   path.resolve( __dirname, 'src/fonts' ),
				type:      'asset/resource',
				generator: {
					filename: "fonts/[name][ext]",
				},
			},
		],
	},
	plugins:      [
		new RemoveEmptyScriptsPlugin(),
		/*new FixStyleOnlyEntriesPlugin({
			//extensions:['less', 'scss', 'css', 'styl','sass'],
			ignore:'css.js'
		}),*/
		new MiniCssExtractPlugin( {
			filename: filename( 'css' ),
		} ),
		new SpriteLoaderPlugin( {
			plainSprite: true,
		} ),
		new UnminifiedWebpackPlugin({
			exclude: /\/sprite-svg.js/
		})
	],

	externals: {
		jquery: 'jQuery'
	}
}