Webpack 4：使Jquery在整个网站上全球可用

我想知道在我的Webpack4网站中全局包含jQuery的最佳方式，即性能。我npm安装了jquery，并使用以下工具手动将jquery添加到每个js文件中：

import $ from "jquery";

我知道这不是正确的方法。我已经看过了CommonChunkPlugin，它似乎解决了我的问题，但自从Webpack4以来，它就贬值了。现在是SplitChunkPlugin，但是文档很难让我理解

我希望像CommonChunkPlugin那样缓存jQuery，这样我就不必每次在我的网站上更改页面时都重新加载它。这是我的网页包配置文件，以防有帮助：

    devServer: {
        host: 'localhost',
        port: 8080,

    },

    entry: {
        homepage: "./src/scripts/homePage.js",
        searchpage: "./src/scripts/searchPage.js",
        estimation: "./src/scripts/estimation.js"

    },

    output: {
        path: __dirname + "/dist/",
        filename: "scripts/[name].bundle.js",
        library: '[name]',
        libraryTarget: 'var',
    },

    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)$/,
                use: [
                    {
                        loader: "file-loader",
                    }
                ]
            },
            {
                 test: /\.s?css$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },

        ]
    },
    plugins: [

        new HtmlWebPackPlugin({
            template: "./src/html/index.html",
            filename: "./index.html",
            inject: 'head',
            chunks : ['homepage'],
            inlineSource: '.(js|css)$'
        }),
        new HtmlWebpackInlineSourcePlugin(),
        new HtmlWebPackPlugin({
            template: "./src/html/estimation.html",
            filename: "./estimation.html",
            inject:'head',
            chunks : ['estimation'],
        }),

        new HtmlWebPackPlugin({
            template: "./src/html/contact.html",
            filename: "./contact.html"
        }),

        new HtmlWebPackPlugin({
            template: "./src/html/searchpage.html",
            filename: "./searchpage.html",
            inject: 'head',
            chunks : ['searchpage'],
        }),
        new HtmlWebPackPlugin({
            template: "./src/html/favorites.html",
            filename: "./favorites.html"
        }),
        new MiniCssExtractPlugin({
            filename:"[name].css",
            chunkFilename:"[id].css"
        })

    ]
}```

---

我解决了我自己的问题哈哈

答案是使用网页ProvidePlugin 以下是一个链接： 您可以将其添加到webpack.config文件的plugins部分，如下所示：

 plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      "window.jQuery": "jquery",
    }),
]

它将使jquery$变量在整个项目中可用，因此您不必全部导入它。最方便的是，如果您有其他使用Jquery的库（例如Bootstrap），那么这些库也可以使用Jquery。因此，不会出现未定义$的错误

如果我没记错的话，jquery会自动缓存在浏览器中，因此大多数情况下，当用户进入网站时，浏览器中已经缓存了jquery，因为他可能会使用jquery访问其他网站。 这就澄清了我问题的另一部分