jQuery with WordPress and Webpack

Question

I've just setup Webpack in a WordPress-theme.

The theme uses Bootstrap, and in that regard, the bootstrap.min.js has previously been loaded like this:

wp_enqueue_script( 'bootstrapjs', get_stylesheet_directory_uri() . '/assets/js/bootstrap.min.js', array( 'jquery' ) );

WordPress has jQuery baked into it, so by specifying jquery as a dependency, this works and everybody is happy.

However, now I'm trying to use Webpack. I'm still getting used to it, - and it was my impression that it's good style to compile as many scripts together into one, to limit the request the server has to make to get all the resources.

So I'm torn... Do I

SOLUTION 1) Not compile Bootstrap.min.js using Webpack.
... And just put that file straight in the assets-folder and enqueue it (bypassing Webpack completely).
Upside: I can just use WordPress' jQuery, so that doesn't need to be loaded twice (which could also cause problems).
Downside: Cluttered file-structure, since some files are loaded through Webpack and some aren't. This will also result in a higher number of files (more server-requests).

SOLUTION 2) Compile Bootstrap.min.js using Webpack. This requires me to import jquery and popper, so I can require the Bootstrap.min.js-file without getting an error.
Upside: Better file structure and fewer files that the server needs to request.
Downside: Jquery needs to be loaded twice (which can be a mess). And that can also result in larger file-sizes.

Answer 1

I had the same issue. Using wp_deregister_script didn't work for me. I was able to fix it using this setting in webpack

  externals: {
    jquery: 'jQuery',
  },

More info here: https://webpack.js.org/configuration/externals/

Answer 2

Another handful solution is using the @wordpress/dependency-extraction-webpack-plugin. You can load it as a webpack plugin and it will automatically detect several dependencies than can be included in the Wordpress installation (jQuery, React, among others).

const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin')
// ...
plugins: [
   new DependencyExtractionWebpackPlugin()
]

An additional benefit is it will output a php array containing the dependencies and checksum of the script file. You can use it later to feed the wp_enqueue_script function.

$script_path = plugin_dir_path(__FILE__ ) . 'dist/main.js';
$script_asset_path = plugin_dir_path(__FILE__ ) . 'dist/main.asset.php';
$script_asset = file_exists( $script_asset_path )
      ? require( $script_asset_path )
      : array( 'dependencies' => array(), 'version' => filemtime( $script_path ) );
  $script_url = plugin_dir_url(__FILE__ ) . 'dist/main.js';
  wp_enqueue_script( 'app', $script_url, $script_asset['dependencies'], $script_asset['version'], false );

I found it is the best way to include a React component in a Wordpress front and of course works for jQuery too.

Answer 3

I just realized that I can just deregister jQuery using this:

function custom_head_cleanup(){
  if( ! is_admin() ){
    wp_deregister_script( 'jquery' ); 
  }
}
add_action( 'init', 'custom_head_cleanup' );

I assume that I then use solution 2.

Answer 4

just struggeling with the same problem. First used your solution 2. Unfortunately a few plugins, which depends on jquery broke. So for me works the following.

1. exclude jQuery from the bundle files via externals in webpack.config module.exports = {

     externals: {
       jquery: 'jQuery'
     }
   };
   
   plugins: [
   
       new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery"
       })
     ]
   

2. Use newer jQuery Version via deregister and register jQuery in functions.php