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

Question

我想知道将 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"
        })

    ]
}```

Answer 1

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

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

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

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

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

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

Webpack 4: Make Jquery available globally across website

jquery

performance

webpack-4