2

We are currently refactoring our code base to use webpack, but we are running into problems with jQuery. For example, change events triggered in one js file are not being listened to in other js files anymore.

It looks like jQuery is instantiated multiple times. When I watch $.expando in the js file triggering the change event, it is different from $.expando in the js file where the event listener is attached. These two js files belong to different webpack entry points and I suspect that jQuery is instantiated separately for every entry point.

So I guess the question is how can we share a single jQuery instance between several entry points? I suspect using a single jQuery instance will solve the event listener issue.

Furthermore, it looks like the whole jQuery code is duplicated in every js file generated by webpack. There must be something wrong with our webpack setup. Also, I'm not sure we should even have so many entry points.

Here's our webpack config:

const webpack = require('webpack');
const path = require('path');

const Dotenv = require('dotenv-webpack');
const ManifestPlugin = require('webpack-manifest-plugin');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
const WebpackWatchedGlobEntries = require('webpack-watched-glob-entries-plugin');

const distPath = path.resolve(__dirname, 'public');
const globEntries = require('./entry-globs');

module.exports = {
  entry: WebpackWatchedGlobEntries.getEntries(
    globEntries.globs, {
      ignore: globEntries.ignore
    }
  ),
  output: {
    path: distPath,
    filename: '[name].[chunkhash:4].js'
  },
  watchOptions: {
    poll: true // to make it work with vagrant
  },
  module: {
    rules: [{
      test: require.resolve('jquery'),
      use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },
        {
          loader: 'expose-loader',
          options: '$'
        }
      ]
    }]
  },
  resolve: {
    alias: {
      surveylabJsAssets: path.resolve(__dirname, './vendor/cloud-solutions/surveylab/assets/js'),
    }
  },
  plugins: [
    new WebpackWatchedGlobEntries(),
    new Dotenv(), // used to access .env vars eg: process.env.SENTRY_API_KEY
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new ManifestPlugin({
      fileName: 'manifest.js.json',
      publicPath: '/',
      basePath: '/',
    }),
    // clean the plugin just for the js dist folder since we handle the other assets with gulp
    new CleanWebpackPlugin({
      // Simulate the removal of files. default: false. Set to true to test the cleanOnceBeforeBuildPatterns
      //dry: true,
      cleanOnceBeforeBuildPatterns: ['js/*', 'manifest.js.json']
    }),
  ]
};
  • why do you need multiple entries and what's inside ./entry-globs?, also how are you importing jquery on your .js files? – randomguy04 10 hours ago

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.