@gravityforms/gulp-tasks/src/webpack/configs/dev-base.js

Configurable Gulp tasks for use in Gravity Forms projects.

/**
 * External Dependencies
 */
import { createRequire } from 'node:module';
import args from '../../utils/get-args.js';
import devServer from '../dev-server/index.js';
import getConfig from '../../../config.js';
import base from './base.js';

const require = createRequire( import.meta.url );
const webpack = require( 'webpack' );
const { merge, mergeWithCustomize, customizeArray } = require( 'webpack-merge' );
const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
const isDevServer = process.env.WEBPACK_SERVE;
const { config } = getConfig();

const output = merge( {
	filename: '[name].js',
	chunkFilename: '[name].[chunkhash].js',
}, config.webpack?.overrides?.output || {} );

export default mergeWithCustomize( {
	customizeArray: customizeArray( {
		plugins: 'append',
	} ),
} )( base, {
	cache: true,
	mode: args.mode ? args.mode : 'development',
	output,
	devtool: args.mode ? false : 'eval-source-map',
	devServer,
	plugins: [
		new webpack.LoaderOptionsPlugin( {
			debug: true,
		} ),
		new webpack.DefinePlugin( {
			'process.env.RUN_MODE': JSON.stringify( 'development' ),
		} ),
		isDevServer && new ReactRefreshWebpackPlugin(),
	].filter( Boolean ),
	optimization: {
		emitOnErrors: false,
		concatenateModules: true, //ModuleConcatenationPlugin
	},
	snapshot: {
		module: {
			hash: true,
		},
	},
} );