引導程序 JavaScript 不適用於 WebPack

Question

I am recently working on projects using Webpack , JS and Bootstrap , 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在瀏覽器中。

筆記：

• 入口文件（即index.js ）中的所有 my.js 文件和 styles 都可以正常工作，所有庫也可以。
• 導入文件的順序為：
  1. jquery
  2. popper.js
  3. bootstrap.min.js
• 對 Jquery 和 Bootstrap 使用 CDN 而不是導入並不能解決問題。

這是 GitHub 上的代碼： https://github.com/WeamAdel/webpack-template

Webpack.config.js：

module.exports = {
  entry: {
     main: "./src/index.js",
     home: "./src/assets/js/home.js",
  },

  output: {
   // filename: "assets/js/[name].[fullhash:7].js",
    path: path.resolve(__dirname, "build"),
  },

  devServer: {
    port: 9000,
    contentBase: path.resolve(__dirname, "build"),
  },

  module: {
    rules: [
      //JS
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
          presets: ["@babel/preset-env"],
        },
      },
   },

  // HTML
  {
    test: /\.html$/i,
    loader: "html-loader",
  },

  //Pug
  {
    test: /\.pug$/i,
    use: ["html-loader", "pug-html-loader"],
  },
   ],
 },

 plugins: [
     new HtmlWebpackPlugin({
        template: "./src/index.pug",
        chunks: ["main", "home"],
     }),
     new CleanWebpackPlugin(),
  ],

  optimization: {
     minimize: true,
     minimizer: [
        `...`,
        new CssMinimizerPlugin(),
    ],
  },

};

index.js

import "jquery";
import "popper.js";
import "bootstrap/dist/js/bootstrap.min";

Answer 1

遇到這個主題，為相同的症狀尋找解決方案。 就我而言，問題是，我安裝了 4.6.0 版引導程序，但復制並粘貼了 5.0 版的代碼片段。