使用 Webpack 2 中的 ProvidePlugin 加载的 jQuery 在路由更改后不起作用答案

【问题标题】：jQuery loaded with ProvidePlugin in Webpack 2 does't work after route change使用 Webpack 2 中的 ProvidePlugin 加载的 jQuery 在路由更改后不起作用
【发布时间】：2017-12-18 13:36:42
【问题描述】：

我在 Angular4 中工作，我正在使用 Webpack 设置来构建应用程序。我想在我的项目中使用 jQuery，所以我用谷歌搜索它并找到了 Webpack 提供的用于全局加载模块的ProviderPlugin。

但是，我面临的问题有点奇怪；第一次加载页面时，页面工作正常，与 jQuery 相关的所有代码工作正常，但是当我更改页面或路由时，jQuery 失去其功能，后续页面无法按预期工作。我错过了什么吗，我用于插件的代码是标准的

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

我也在寻找其他解决方案，如果有其他方法可以做，那么请提及这将是一个很大的帮助。

非常感谢。

【问题讨论】：

标签： javascript jquery angular webpack webpack-plugin

【解决方案1】：

您也可以使用 HtmlWebpackPlugin 来创建您的 html 页面。并设置注入：真。因为您的问题可能是当您尝试访问未声明 jquery 的另一个页面时，因此您需要一个包含 jquery 的主模板页面，并从该模板创建下一个 html 页面。示例如下：

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
})

所以在 npm 中下载包，配置，安装然后设置。

你也可以用这个编辑你的jquery插入：

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

【讨论】：

你好，谢谢你的回答，我按照你的建议做了，但是没有用。我做了这样的事情new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', inject: true })
嗯，你是通过 npm 下载 jquery 的吗？提示：HtmlWebpackPlugin 不是 jquery 作品所必需的，它只是一个可以更快地创建 html 页面的插件。您可以阅读您的文档以获取更多信息。
是的，我确实通过 NPM 下载了 jQuery。