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'
          }
        ]
      }
    ]
  }
};

try using react-bootstrap, so you can import only what you need, and it is way easier, you can use only webpack in that case. — PlayMa256
– PlayMa256, Commented Jul 30, 2018 at 15:49
I'm definitely not going this way at this point :) I'm 100% sure there is way to exclude jquery as for example Foundation do. — RomkaLTU
– RomkaLTU, Commented Jul 30, 2018 at 15:51

JSTL · Accepted Answer · 2018-07-30 16:12:11Z

1

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

answered Jul 30, 2018 at 16:12

JSTL

8681 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Importing Bootstrap JavaScript, Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related