使用 webpack.ProvidePlugin 时未定义 $答案

【问题标题】：$ is not defined when use webpack.ProvidePlugin使用 webpack.ProvidePlugin 时未定义 $
【发布时间】：2016-12-01 18:02:37
【问题描述】：

我正在尝试将 jquery 与 webpack 一起使用，但即使我使用 Webpack Provider 插件，例如：

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

似乎没有将我的 jQuery 暴露给窗口全局范围。

【问题讨论】：

或许可以通过this answer解决
你的测试是什么？

标签： jquery angularjs webpack

【解决方案1】：

据我了解，ProvidePlugin 将这些变量提供给其他 WebPacked 代码，但不提供外部代码或内联脚本。

'expose-loader' 插件交替地在 webpacked 包之外公开全局变量。将以下内容添加到您的规则中以定义指向捆绑 jQuery 的全局 jQuery 和 $ 变量。

rules:[
...
// Expose jquery globally for inline/legacy use
{
    test: require.resolve('jquery'),
    use: [
        { loader: 'expose-loader', options: 'jQuery' },
        { loader: 'expose-loader', options: '$' }
    ]
},
...
]

【讨论】：

添加这两个东西并不能解决我的问题。
您的供应商捆绑包中是否包含 Jquery？我正在使用 Webpack 3.10.0 并在 app-vendor.js 入口点中有 jquery，然后使用该插件将其公开为全局（您可以在浏览器调试器中检查这一点）。或者，您可以将其声明为外部，在 CDN 上包含指向 Jquery 的直接链接，然后使用提供插件确保您的所有 webpacked 代码都能在没有特殊导入的情况下看到它。不过老实说，webpack 对我来说仍然是一个巨大的模糊谜团。
是的，它在我的供应商包中，通过 CommonsChunkPlugin 放置在那里。目前使用 webpack 2.x。现在，如果我使用带有 require.resolve 的加载器、ProvidePlug、两者都使用或都不使用，我会得到相同的结果（没有为任何页面上需要它的任何内容定义 Jquery）。在我看来，没有任何方法实际上会导致任何东西被调用。
在阅读您的评论后更深入地查看后，有趣的是，如果我在控制台中检查（在错误的洪流之后）定义了 $ 和 window.jQuery 等。我一定有一些依赖没有正确连接到 webpack 的问题。
可能是，如果抛出错误的代码在您的 webpack 包中，ProvidePlugin 应该填补任何空白，我的位于页面中内联的旧遗留代码之外，因此“公开”位是必要的.