Webpack 4：让 Jquery 跨网站在全球范围内可用答案

【问题标题】：Webpack 4: Make Jquery available globally across websiteWebpack 4：让 Jquery 跨网站在全球范围内可用
【发布时间】：2020-01-01 18:03:30
【问题描述】：

我想知道将 jQuery 全局包含到我的 Webpack 4 网站的最佳方式和性能。我 npm 安装了 jquery 并手动将 jquery 添加到每个 js 文件中：

import $ from "jquery";

我知道这不是正确的方法。我看过似乎解决了我的问题的 CommonsChunkPlugin，但它自 Webpack 4 起就贬值了。现在它是 SplitChunkPlugin，但文档很难让我理解。

我很想像 CommonsChunkPlugin 那样缓存 jQuery，这样我就不必每次在我的网站上更改页面时都重新加载它。这是我的 Webpack 配置文件，以防万一：

    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"
        })

    ]
}```

【问题讨论】：

标签： jquery performance webpack-4

【解决方案1】：

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

答案是使用 webpack ProvidePlugin 这是一个链接：ProvidePlugin 您将其添加到 webpack.config 文件中的插件部分，如下所示：

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

它将使 jquery $ 变量在您的项目中可用，因此您不必全部导入它。它的方便之处在于，如果您有其他使用 Jquery 的库（例如 Bootstrap），那么这些库也可以使用它。所以你不会得到 $ 没有定义的错误！

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

【讨论】：