Webpack merge rules

webpack.config.js

const defaultConfig = require('@wordpress/scripts/config/webpack.config');
const { getWebpackEntryPoints } = require('@wordpress/scripts/utils/config');

module.exports = {
	...defaultConfig,
	stats: 'minimal',
	entry: {
		...getWebpackEntryPoints(),
		'app-styles': ['./src/css/app.css'],
		'app-scripts': ['./src/js/app.js'],
		'editor-styles': ['./src/css/editor.css'],
		'editor-scripts': ['./src/js/editor.js'],
	},
	output: {
		path: __dirname + '/dist',
		publicPath: '/dist',
	},
	rules: [
		{
			test: /\.css$/,
			use: [
				{
					loader: require.resolve('css-loader'),
					options: {
						url: false,
					},
				},
			],
		},
		{
			test: /\.(sc|sa)ss$/,
			use: [
				{
					loader: require.resolve('css-loader'),
					options: {
						url: false,
					},
				},
			],
		},
	].concat(defaultConfig.module.rules.filter((item) => item.test !== /\.css$/ || item.test !== /\.(sc|sa)ss$/)),
	devServer: {
		...defaultConfig.devServer,
		hot: true,
		static: __dirname + '/dist/',
		allowedHosts: 'all',
		host: 'localhost',
		port: 1873,
		proxy: {
			'/dist': {
				pathRewrite: {
					'^/dist': '',
				},
			},
		},
	},
};