类型错误: webpack.ProvidePlugin不是一个构造函数。

Question

我想使用一个简单的bootstrap、jquery插件bootstrap-show-password，但是当加载带有表单的页面时会显示错误Uncaught ReferenceError: $ is not defined。

我不明白为什么jquery没有被加载。我做了通常的操作：

npm install bootstrap jquery popper.js --save

并且在我的app.js文件中添加了以下代码：

//import jQuery from "jquery";
//window.$ = window.jQuery = jQuery;
// this should be loaded with webpack, right?! ^

import "bootstrap";
import "bootstrap-show-password";

我正在查看webpack 文档，上面说要使用插件提供程序，但是当我将其添加到我的webpack.config.js文件中时。

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
});

npm run build 告诉我出现了 TypeError: webpack.ProvidePlugin is not a constructor 错误。

我是否漏掉了需要安装的东西？

这是我的 package.json 依赖项：

  "devDependencies": {
    "@babel/preset-env": "^7.12.17",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.2.2",
    "browser-sync": "^2.26.14",
    "eslint": "^7.20.0",
    "eslint-loader": "^4.0.2",
    "htmlnano": "^0.2.8",
    "imagemin-cli": "^6.0.0",
    "node-sass": "^5.0.0",
    "npm-run-all": "^4.1.5",
    "onchange": "^7.1.0",
    "postcss": "^8.2.6",
    "postcss-cli": "^8.3.1",
    "posthtml": "^0.15.1",
    "posthtml-cli": "^0.9.1",
    "posthtml-modules": "^0.7.3",
    "stylelint": "^13.11.0",
    "webpack": "^5.23.0",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "bootstrap": "^4.6.0",
    "bootstrap-show-password": "^1.2.1",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }

- scibuff

Answer 1

好的，几个小时后，我发现罪魁祸首是在webpack.config.js中错误初始化了webpack变量。出于我无法理解的原因，我把它放在那里了。

const { webpack } = require("webpack");

代替

const webpack = require("webpack");

- scibuff

---

我曾经遇到过同样的错误，这是必须的修复方法。感觉自己像是经历了一次denvercoder9时刻，只不过找到了答案 https://xkcd.com/979/ - Daryl

我也遇到了同样的问题。webpack 有一个非常流行的教程，在顶部附近有错误的代码。我猜这是复制粘贴造成的。对于所有遇到相同问题的人来说，这是一个非常有帮助的答案。 - Terry

因为 VSCode 试图帮助你，在看到你输入“new webpack.ProviderPlugin”时插入了 {webpack}。 - mainstreetmark

Answer 2

我曾经遇到过同样的问题，但最终成功解决了。这是我的webpack配置：

const { webpack } = require("webpack");

...
plugins: [
    ...
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
    }),
    ...
  ],
...

这是我解决它的方法：

// Import ProvidePlugin directly
const { webpack, ProvidePlugin } = require("webpack");

...
plugins: [
    ...
    // call the ProvidePlugin constructor directly
    new ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
    }),
    ...
  ],
...

webpack.ProvidePlugin 只有在你像这样使用 webpack 的默认导入时才会起作用，

const webpack = require("webpack");

- Joseph Ajibodu