Bootstrap JavaScript 不适用于 WebPack

Question

我最近正在使用 Webpack、JS 和 Bootstrap 进行项目，但突然在我目前正在进行的项目中，尽管使用相同的 Webpack 和 npm 配置，引导 Javascript 停止工作，尽管它显示在浏览器的 Sources 选项卡中的 javascript 包中。

注意事项：

• 我在入口文件中的所有 .js 文件和样式，即 index.js 工作正常，所有库也一样。
• 导入文件的顺序为：
  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 版的代码 sn-ps。