title: Bootstrap JavaScript Is Not Working with WebPack
body: <p>I am recently working on projects using <strong>Webpack</strong>, <strong>JS</strong> and <strong>Bootstrap</strong>, but suddenly on the project I am currently working on, and despite using the same Webpack and npm configs the bootstrap Javascript stopped working, although It shows in the javascript bundle in the Sources tab in the browser.</p>
  <p><strong>Notes:</strong></p>
  <ul>
  <li>All my .js files and styles in the entry file i.e <strong>index.js</strong> work fine and all libraries, too.</li>
  <li>The order of imported files is:
  <ol>
  <li>jquery</li>
  <li>popper.js</li>
  <li>bootstrap.min.js</li>
  </ol>
  </li>
  <li>Using CDNs for both Jquery and Bootstrap instead of imports did not fix the problem.</li>
  </ul>
  <p>Here is the code on GitHub: <a href="https://github.com/WeamAdel/webpack-template" rel="nofollow noreferrer">https://github.com/WeamAdel/webpack-template</a></p>
  <p><strong>Webpack.config.js:</strong></p>
  <pre><code>module.exports = {
    entry: {
       main: &quot;./src/index.js&quot;,
       home: &quot;./src/assets/js/home.js&quot;,
    },
  
    output: {
     // filename: &quot;assets/js/[name].[fullhash:7].js&quot;,
      path: path.resolve(__dirname, &quot;build&quot;),
    },
  
    devServer: {
      port: 9000,
      contentBase: path.resolve(__dirname, &quot;build&quot;),
    },
  
    module: {
      rules: [
        //JS
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: &quot;babel-loader&quot;,
            options: {
            presets: [&quot;@babel/preset-env&quot;],
          },
        },
     },
  
    // HTML
    {
      test: /\.html$/i,
      loader: &quot;html-loader&quot;,
    },
  
    //Pug
    {
      test: /\.pug$/i,
      use: [&quot;html-loader&quot;, &quot;pug-html-loader&quot;],
    },
     ],
   },
  
   plugins: [
       new HtmlWebpackPlugin({
          template: &quot;./src/index.pug&quot;,
          chunks: [&quot;main&quot;, &quot;home&quot;],
       }),
       new CleanWebpackPlugin(),
    ],
  
    optimization: {
       minimize: true,
       minimizer: [
          `...`,
          new CssMinimizerPlugin(),
      ],
    },
  </code></pre>
  <p>};</p>
  <p><strong>index.js</strong></p>
  <pre><code>import &quot;jquery&quot;;
  import &quot;popper.js&quot;;
  import &quot;bootstrap/dist/js/bootstrap.min&quot;;
  </code></pre>