How to use the @wordpress/scripts/config/webpack.config.module function in @wordpress/scripts

},
  /*
   * Give precedence to our node_modules folder when resolving the same module.
   *
   * This solves duplicate issues with styled-components.
   *
   * @see https://www.styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page
   */
  // resolve: {
  //   modules: [path.resolve(__dirname, "node_modules"), "node_modules"]
  // },
  devtool: "eval-source-map",
  module: {
    ...defaultConfig.module,
    rules: [
      ...defaultConfig.module.rules,
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // We use the MiniCssExtractPlugin for both production and development
          // since development happens inside of WordPress which loads the css
          // files anyway (using the enqueue_scripts hook).
          //
          // @see https://webpack.js.org/loaders/sass-loader/#extracting-style-sheets
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]

// langs.forEach( lang => config.entry[`docs-${ lang }`] = path.resolve( process.cwd(), `docs/${ lang }`, 'index.js' ) )
// ---------------------------------------------

// ---------------------------------------------
// Uncomment for webpack v5, to not duplicate the content of the docs inside build/index.js
// config.entry.index = {
// 	import: path.resolve( process.cwd(), 'src', 'index.js' ),
// 	dependOn: 'docs'
// }
// config.entry.docs = langs.map( lang => `docs-${ lang }` )
// ---------------------------------------------

/**
 * Add support for additional file types
 */
config.module.rules.push(
	/**
	 * Markdown
	 */
	{
		test: /\.md$/,
		use: [
			{
				loader: "html-loader"
			},
			{
				loader: "markdown-loader"
			}
		]
	}
);

sourceMap: false,
				cache: true,
				terserOptions: {
					output: {
						comments: /translators:/i,
					},
				},
				extractComments: false,
			} ),
			new OptimizeCSSAssetsPlugin( {} ),
		],
	},
	module: {
		...defaultConfig.module,
		rules: [
			...defaultConfig.module.rules,
			{
				test: /\.css$/,
				use: [
					// prettier-ignore
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
				],
			},
		],
	},
	plugins: [
		...defaultConfig.plugins,
		new MiniCssExtractPlugin( {
			filename: '../css/[name]-compiled.css',
		} ),

resolve: {
    extensions: [
      '.ts',
      '.tsx',
      '.js',
      '.jsx',
      '.json',
    ]
  },
  module: {
    noParse: [
      /tests/,
      /vendor/,
    ],
    rules: [
      ...defaultConfig.module.rules,
      {
        test: /\.ts(x?)$/,
        exclude: [
          /node_modules/,
        ],
        loader: 'ts-loader',
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: [
          /node_modules/,
        ],
        loader: 'source-map-loader',
      },
    ],

'css/charitable-modal': './src/css-modal.js',
        'css/charitable-plupload-fields': './src/css-plupload.js',
        'css/charitable-block-editor': './src/css-block-editor.js',
        'css/charitable-datepicker': './src/css-datepicker.js',
        'css/charitable-select2': './src/css-datepicker.js',
        'js/charitable-blocks': './src/charitable-blocks.js',
        'js/charitable-editor-sidebar': './src/charitable-editor-sidebar.js'
    },
    output: {
        path: path.resolve( process.cwd(), 'assets' ),
        filename: '[name].js'
    },
    module: {
        ...defaultConfig.module, 
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        ...defaultConfig.plugins,

* Otherwise we get error in GraphiQL:
	 *
	 * WARNING in ./node_modules/graphql-language-service-parser/esm/CharacterStream.js
	 * Module Warning (from ./node_modules/source-map-loader/index.js):
	 * (Emitted value instead of an instance of Error) Cannot find source file '../src/CharacterStream.ts': Error: Can't resolve '../src/CharacterStream.ts' in '.../node_modules/graphql-language-service-parser/esm'
	 *  @ ./node_modules/graphql-language-service-parser/esm/index.js 1:0-63 1:0-63
	 *  @ ./node_modules/codemirror-graphql/variables/mode.js
	 *  @ ./node_modules/graphiql/dist/components/VariableEditor.js
	 *  @ ./node_modules/graphiql/dist/components/GraphiQL.js
	 *  @ ./node_modules/graphiql/dist/index.js
	 *  @ ./src/EditBlock.js
	 *  @ ./src/index.js
	 *
	 * Because that rule was added using "unshift" (in file node_modules/@wordpress/scripts/config/webpack.config.js) then it's on the first position of the array
	 */
	config.module.rules[ 0 ].exclude = [ /node_modules/, /build/ ];
}

module.exports = config;

* Otherwise we get error in GraphiQL:
	 *
	 * WARNING in ./node_modules/graphql-language-service-parser/esm/CharacterStream.js
	 * Module Warning (from ./node_modules/source-map-loader/index.js):
	 * (Emitted value instead of an instance of Error) Cannot find source file '../src/CharacterStream.ts': Error: Can't resolve '../src/CharacterStream.ts' in '.../node_modules/graphql-language-service-parser/esm'
	 *  @ ./node_modules/graphql-language-service-parser/esm/index.js 1:0-63 1:0-63
	 *  @ ./node_modules/codemirror-graphql/variables/mode.js
	 *  @ ./node_modules/graphiql/dist/components/VariableEditor.js
	 *  @ ./node_modules/graphiql/dist/components/GraphiQL.js
	 *  @ ./node_modules/graphiql/dist/index.js
	 *  @ ./src/EditBlock.js
	 *  @ ./src/index.js
	 *
	 * Because that rule was added using "unshift" (in file node_modules/@wordpress/scripts/config/webpack.config.js) then it's on the first position of the array
	 */
	config.module.rules[ 0 ].exclude = [ /node_modules/, /build/ ];
}

module.exports = config;

'js/coblocks-lightbox': path.resolve( process.cwd(), 'src/js/coblocks-lightbox.js' ),
		'js/coblocks-masonry': path.resolve( process.cwd(), 'src/js/coblocks-masonry.js' ),
		'js/coblocks-slick-initializer-front': path.resolve( process.cwd(), 'src/js/coblocks-slick-initializer-front.js' ),
		'js/coblocks-slick-initializer': path.resolve( process.cwd(), 'src/js/coblocks-slick-initializer.js' ),

		'js/vendors/flickity': path.resolve( process.cwd(), 'node_modules/flickity/dist/flickity.pkgd.min.js' ),
		'js/vendors/slick': path.resolve( process.cwd(), 'node_modules/slick-carousel/slick/slick.min.js' ),
	},

	output: {
		filename: '[name].js',
		path: path.resolve( process.cwd(), 'dist/' ),
	},

	module: {
		...defaultConfig.module,
		rules: [
			...defaultConfig.module.rules,

			{
				test: /style\.scss$/,
				use: styleExtractConfig,
			},

			{
				test: /editor\.scss$/,
				use: styleExtractConfig,
			},

		],
	},

* Otherwise we get error in GraphiQL:
	 *
	 * WARNING in ./node_modules/graphql-language-service-parser/esm/CharacterStream.js
	 * Module Warning (from ./node_modules/source-map-loader/index.js):
	 * (Emitted value instead of an instance of Error) Cannot find source file '../src/CharacterStream.ts': Error: Can't resolve '../src/CharacterStream.ts' in '.../node_modules/graphql-language-service-parser/esm'
	 *  @ ./node_modules/graphql-language-service-parser/esm/index.js 1:0-63 1:0-63
	 *  @ ./node_modules/codemirror-graphql/variables/mode.js
	 *  @ ./node_modules/graphiql/dist/components/VariableEditor.js
	 *  @ ./node_modules/graphiql/dist/components/GraphiQL.js
	 *  @ ./node_modules/graphiql/dist/index.js
	 *  @ ./src/EditBlock.js
	 *  @ ./src/index.js
	 *
	 * Because that rule was added using "unshift" (in file node_modules/@wordpress/scripts/config/webpack.config.js) then it's on the first position of the array
	 */
	config.module.rules[ 0 ].exclude = [ /node_modules/, /build/ ];
}

module.exports = config;

* Otherwise we get error in GraphiQL:
	 *
	 * WARNING in ./node_modules/graphql-language-service-parser/esm/CharacterStream.js
	 * Module Warning (from ./node_modules/source-map-loader/index.js):
	 * (Emitted value instead of an instance of Error) Cannot find source file '../src/CharacterStream.ts': Error: Can't resolve '../src/CharacterStream.ts' in '.../node_modules/graphql-language-service-parser/esm'
	 *  @ ./node_modules/graphql-language-service-parser/esm/index.js 1:0-63 1:0-63
	 *  @ ./node_modules/codemirror-graphql/variables/mode.js
	 *  @ ./node_modules/graphiql/dist/components/VariableEditor.js
	 *  @ ./node_modules/graphiql/dist/components/GraphiQL.js
	 *  @ ./node_modules/graphiql/dist/index.js
	 *  @ ./src/EditBlock.js
	 *  @ ./src/index.js
	 *
	 * Because that rule was added using "unshift" (in file node_modules/@wordpress/scripts/config/webpack.config.js) then it's on the first position of the array
	 */
	config.module.rules[ 0 ].exclude = [ /node_modules/, /build/ ];
}

module.exports = config;