title: Webpack 4 is tree shaking away bootstrap, how can I prevent that?
body: <p>I am trying to get a legacy app that uses the Jquery modal plugin which requires bootstrap's javascript to work within an Angular 6 and Webpack 4 project that uses a custom Webpack configuration. Everything is working except that the tree shaking that takes place during bundling is removing the bootstrap imports that are in my <code>vendor.ts</code> file because no where in my app do I explicitly use the bootstrap import. </p>
  
  <p>This then causes my bootstrap modals and bootstrap dropdowns to break.</p>
  
  <p><strong>Note:</strong> if I add something like:</p>
  
  <pre><code>import * as bootstrap from "bootstrap";
  console.log(bootstrap);
  </code></pre>
  
  <p>to my <code>main.ts</code> file, webpack doesn't remove bootstrap and everything works fine. </p>
  
  <p>I have already tried adding multiple entries to my <code>package.json</code> sideEffects property that has been suggested in <a href="https://webpack.js.org/guides/tree-shaking/" rel="nofollow noreferrer">the documentation</a> but I am thinking that this property is used to mark code that <em>should be</em> removed. Is there a way to mark imported modules as <strong>not</strong> to be removed from the tree shaking process?</p>
  
  <p>I have also tried the ProvidePlugin like so:</p>
  
  <pre><code>new ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      _: "underscore",
      bootstrap: "bootstrap",
      moment: "moment",
      momenttimezone: "moment-timezone",
      // Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
      // Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
      Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
  })
  </code></pre>
  
  <p>Thanks for your time.</p>