1

I am adding some customizer controls to the theme, and I have a question on adding customize scripts and preview scripts when using bundler such as webpack.

All my theme assets (scss, js, images etc.) are bundled with webpack in one single file for each file type.

That is, my scss gets compiled to css, and all my js will be compiled to one file. I have two files when it comes to JS - one for front and one for admin.

The problem I have is that when I want to add scripts for contextual controls, I have to use customize_controls_enqueue_scripts, and when I want to add scripts for preview I need to use customize_preview_init hooks respectively.

But since both my separate scripts get bundled to one, doing this:

add_action( 'customize_controls_enqueue_scripts', 'wpse1233_register_customize_settings', 1 );

if ( ! function_exists( 'wpse1233_register_customize_settings' ) ) {
  /**
   * Register customizer scripts
   *
   * @since 1.0.0
   */
  function wpse1233_register_customize_settings() {
    wp_register_script( 'my-customize-script', get_template_directory_uri() . '/skin/public/scripts/applicationAdmin.js', array( 'customize-controls', 'wp-api' ), '1.0.0' );
    wp_enqueue_script( 'my-customize-script' );
  }
}

add_action( 'customize_preview_init', 'wpse2344_register_preview_script', 1 );

if ( ! function_exists( 'wpse2344_register_preview_script' ) ) {
  /**
   * Register customizer scripts
   *
   * @since 1.0.0
   */
  function wpse2344_register_preview_script() {
    wp_register_script( 'my-customize-preview', get_template_directory_uri() . '/skin/public/scripts/applicationAdmin.js', array( 'customize-preview' ), '1.0.0' );
    wp_enqueue_script( 'my-customize-preview' );
  }
}

Will add two same scripts twice on my customizer screen.

So what is the best way to use bundler and enqueue together?

EDIT:

I guess I could use webpack for transpiling the ES6 code and minification but output it as a separate script for enqueue.

Which kinda defeats the purpose of bundling all scripts into one file...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.