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

Configurable Gulp tasks for use in Gravity Forms projects.

/**
 * External Dependencies
 */
const webpack = require( 'webpack' );
const { merge, mergeWithCustomize, customizeArray } = require( 'webpack-merge' );
const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
const args = require( '../../utils/get-args' );
const devServer = require( '../dev-server' );
const isDevServer = process.env.WEBPACK_SERVE;
const getConfig = require( '../../../config' );
const { config } = getConfig();

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

module.exports = 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,
		},
	},
} );