Webpack集成Flask时导入jQuery致app.js无法执行的问题排查

我用Webpack搭配Flask开发，原本app.js内容如下时一切正常：

import "../styles/index.scss";
import "bootstrap/dist/js/bootstrap.bundle";
import "../components/sidebar";

window.document.addEventListener("DOMContentLoaded", function () {
  window.console.log("dom ready 12");
  console.log("Ggg");
});

但添加以下代码后，app.js完全不再执行——浏览器控制台原本的日志不再显示，尽管Webpack监听进程没有抛出任何错误：

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

我试过多种导入写法，都无法解决问题：

• import * as $ from 'jquery'; window.$ = $;
• import * as $ from 'jquery/dist/jquery.min'; window.$ = $;
• import * from "jquery/dist/jquery.min.js";

编辑补充：我还尝试配置Webpack的Provide Plugin（配置见下方webpack.common.js），同样没有效果。

我的webpack.common.js配置：

const glob = require("glob");
const Path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const WebpackAssetsManifest = require("webpack-assets-manifest");

const getEntryObject = () => {
  const entries = {};
  glob.sync(Path.join(__dirname, "../src/application/*.js")).forEach((path) => {
    const name = Path.basename(path, ".js");
    entries[name] = path;
  });
  return entries;
};
var webpack = require("webpack");

module.exports = {
  entry: getEntryObject(),
  output: {
    path: Path.join(__dirname, "../build"),
    filename: "js/[name].js",
    publicPath: "/static/",
    assetModuleFilename: "[path][name][ext]",
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    },

    runtimeChunk: "single",
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from: Path.resolve(__dirname, "../vendors"), to: "vendors" },
      ],
    }),
    new WebpackAssetsManifest({
      entrypoints: true,
      output: "manifest.json",
      writeToDisk: true,
      publicPath: true,
    }),
  ],
  resolve: {
    alias: {
      "~": Path.resolve(__dirname, "../src"),
    },
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto",
      },
      {
        test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        type: "asset",
      },
    ],
  },
};

HTML中加载脚本的代码：

{{ javascript_pack('app', 'app2', attrs='charset="UTF-8"') }}
<script>$('#my-select')</script>

生成的manifest.json内容：

{
  "app.css": "/static/css/app.css",
  "app.js": "/static/js/app.js",
  "app2.js": "/static/js/app2.js",
  "entrypoints": {
    "app": {
      "assets": {
        "js": [
          "/static/js/runtime.js",
          "/static/js/vendors-node_modules_bootstrap_dist_js_bootstrap_bundle_js-node_modules_jquery_dist_jquery_js.js",
          "/static/js/app.js"
        ],
        "css": [
          "/static/css/app.css"
        ]
      }
    },
    "app2": {
      "assets": {
        "js": [
          "/static/js/runtime.js",
          "/static/js/app2.js"
        ]
      }
    }
  },
  "js/vendors-node_modules_bootstrap_dist_js_bootstrap_bundle_js-node_modules_jquery_dist_jquery_js.js": "/static/js/vendors-node_modules_bootstrap_dist_js_bootstrap_bundle_js-node_modules_jquery_dist_jquery_js.js",
  "runtime.js": "/static/js/runtime.js",
  "vendors/.gitkeep": "/static/vendors/.gitkeep",
  "vendors/images/.gitkeep": "/static/vendors/images/.gitkeep",
  "vendors/images/sample.jpg": "/static/vendors/images/sample.jpg",
  "vendors/images/webpack.png": "/static/vendors/images/webpack.png"
}

请问这一问题的原因是什么？

内容的提问来源于stack exchange，提问作者Asaph Talmor