Importing Bootstrap JavaScript, Webpack

Question

I'm trying to import only collapse component from Bootstrap JS components like this:

import "../../../node_modules/bootstrap/js/dist/collapse";

Everything is fine except jQuery, this file (collapse.js) is requiring jquery and it's get compiled to my main.js file, how to avoid that? I have included jQuery from CDN.

Here is my Gulp/Webpack config

let webpackConfig = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
};
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
  return gulp.src(PATHS.entries)
    .pipe(named())
    .pipe($.sourcemaps.init())
    .pipe(webpackStream(webpackConfig, webpack2))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

UPDATE, SOLUTION:

let webpackConfig = {
  externals: { jquery: 'jQuery' },
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
};

Answer 1

You can use the externals settings from Webpack to stop it from including some packages into your bundle.