為什么 Jquery $ 在 webpack 中顯示為 undefined？

Question

我在 src 文件夾中的 index.js 文件中有以下代碼：

 import './styles/main.scss'; import $ from 'jquery'; //Smooth scroll $(".navbar a").on("click", function (e) { e.preventDefault(); if (this.hash.== "") { const hash = this;hash, $("html. body"):animate( { scrollTop. $(hash).offset(),top, }; 800 ); } });

但是，當我構建項目時出現此錯誤：

 ERROR in./src/index.js Module not found: Error: Can't resolve 'jquery' in '[url]\src' @./src/index.js 2:0-23 4:0-1 9:4-5 10:17-18 @./node_modules/html-webpack-plugin/lib/loader.js../src/index.html

我無法弄清楚是什么導致了這個問題。 我遵循了 webpack 有關配置外部設備的文檔，但我仍然遇到此錯誤。 如果您查看我的配置文件，您會看到我配置了外部設備。 這是我的 webpack 配置文件：

 const path = require("path"); const HtmLWebPackPlugin = require("html-webpack-plugin"); const MiniCSSExtractPlugin = require("mini-css-extract-plugin"); module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", }, }, { test: /\.html$/, use: [ { loader: "html-loader", options: { minimize: true }, }, ], }, { test: /\.(png|svg|jpg|gif|jpeg)$/, use: ["file-loader"], }, { test: /\.scss$/, use: ["css-loader", "sass-loader"], }, ], }, plugins: [ new HtmLWebPackPlugin({ template: "./src/index.html", filename: "./index.html", }), new MiniCSSExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css", }), ], externals: { jquery: "jQuery", }, };

Answer 1

替換import $ from 'jquery';

和

jQuery = $ = window.jQuery = require('jquery');