• Dear all,

    I have written some custom functions in separate files (outside the block’s folder) and imported them to use in the custom block functionality (in edit.js file). But when I built it, I see these files 488.js and 779.js in the build folder (the screenshot). I understand that these files are due to my imports. I built it using wp-scripts without any other custom configuration.

    My question is, is there a way to not have these random numbers of JS files (I mean they will be minified in index.js file e.g.), but if not, is there a way to add names to them (to not have random numbered JS files)?

    Thanks in advance,
    Vahan

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi Vahan,

    When creating a Gutenberg block (or any other JavaScript project) using wp-scripts, the random numbered JS files in the build folder are most likely the result of Webpack’s default chunking behavior. Webpack breaks down your code into chunks to improve loading speeds and enable for code splitting.

    You can modify the Webpack configuration used by wp-scripts:

    1. Create a Custom Webpack Configuration: Create a webpack.config.js file in your project root directory.
    2. Customize the Configuration: Add a configuration to set the filenames for the output. Here is an example configuration:

      const path = require('path');
      module.exports = {
      entry: './src/index.js',
      output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'index.js',
      },
      optimization: { splitChunks: { chunks: 'none',}, }, };

    3. Update package.json

      Alternative: Using wp-scripts without Custom Webpack Configuration
      If you don’t want to deal with custom Webpack configurations, try leveraging wp-scripts’ built-in functionality as much as possible, and make sure your code is streamlined and arranged in a way that reduces unnecessary chunk production.

      Let me know if you need further assistance!
    • This reply was modified 3 months, 1 week ago by Mansi Jani.
    Thread Starter Vahan

    (@vahan889)

    hi @mjani ,

    Thanks for the reply.

    I got you and added a webpack.config.js file:

    const defaultConfig = require('@wordpress/scripts/config/webpack.config.js');

    module.exports = {
    ...defaultConfig,
    optimization: {
    splitChunks: {
    chunks: 'none',
    },
    },
    };

    But when I run this command wp-scripts build --webpack-src-dir=blocks/{the_block}/src --output-path=blocks/{the_block}/build it outputs this – see screenshot.

    Can you help me to figure it out what to setup?

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.