使用Webpack 4

Question

我正在尝试使用Webpack 4为内联JavaScript创建一个jQuery插件。

我使用PluginProvider将jQuery提供给我的网站：

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

这很好用，我可以从任何包含我的包的页面访问jQuery。

我尝试通过创建名为vendor.js的包来添加bootstrap-datepicker，其中包含以下内容：

import 'bootstrap-datepicker';

我可以在$('input').datepicker()捆绑包内拨打vendor.js，但是如果我尝试使用内联<script>来调用它，我会得到：

Uncaught TypeError: $(...).datepicker is not a function

如何配置Webpack 4以使bootstrap-datepicker可用于全局范围？

更新

我已在此处上传了显示此问题的源代码：https://github.com/LondonAppDev/webpack-global-jquery-issue

看来问题是第二个bundle导入是在没有datpicker附加组件的情况下重新添加jQuery。有办法解决这个问题吗？

Answer 1

我已经在这类问题上走了几轮，并且expose-loader取得了最大的成功。在您的webpack配置中，您应该使用以下公开的加载程序配置为jQuery设置一个部分：

OutputStreamFilter

此处有类似的SO帖子：

How to import jquery in webpack（他们的正则表达式对我不起作用）

Expose jQuery to real Window object with Webpack

Webpack 2 loading, exposing, and bundling jquery and bootstrap

您应该能够使用此配置找到其他几篇文章/帖子，这是我迄今为止唯一能够成功完成工作的文章/帖子。

另外值得注意的是，bootstrap 4似乎也在内部加载或对jQuery执行了一个require，所以如果在jQuery import / require和plugins之后包含import或者require，它将重新启动jQuery并导致你的插件失去范围。