使用webpack和bootstrap-loader，$（…）。modal不是函数（…）错误

我在使用$('#modal-id').modal('show')函数打开模态时遇到问题。 在缩小问题范围后，我认为这与webpack加载我的依赖关系或特别是与jQuery依赖关系有关。

以下是我的webpack配置的必要部分：

 entry: { 'js/bootstrap.bundle': 'bootstrap-loader', 'js/common.bundle': [ path.join(PROJECT_ROOT, 'resources/assets/js/common/app.js'), path.join(PROJECT_ROOT, 'resources/assets/js/common/table.js') ], ... }, ... plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ], 

所以我的想法是所有加载了bootstrap的文件都应该进入一个文件js/bootstrap.bundle.js并且应该将jQuery依赖项加载到需要它的每个bundle中。

除了模态函数之外，bootstrap-loader完全适用于所有样式以及$和jQuery变量。

这是我的.bootstraprc文件：

 useFlexbox: true bootstrapVersion: 3 preBootstrapCustomizations: ./resources/assets/scss/partials/_variables.scss bootstrapCustomizations: ./resources/assets/scss/app.scss styleLoaders: - style - css - sass styles: mixins: true normalize: true print: true glyphicons: true scaffolding: true type: true code: true grid: true tables: true forms: true buttons: true component-animations: true dropdowns: true button-groups: true input-groups: true navs: true navbar: true breadcrumbs: true pagination: true pager: true labels: true badges: true jumbotron: true thumbnails: true alerts: true progress-bars: true media: true list-group: true panels: true wells: true responsive-embed: true close: true modals: true tooltip: true popovers: true carousel: true utilities: true responsive-utilities: true scripts: transition: true alert: true button: true carousel: true collapse: true dropdown: true modal: true // MODAL SCRIPT IS LOADED tooltip: true popover: true scrollspy: true tab: true affix: true 

我如何使用捆绑的文件：

我正在加载引导程序附带的所有内容，并且模块脚本在bundle中加载。 但我不知道为什么这找不到模态函数。 提前致谢。

Answer 1

我找到了使用以下配置的解决方案：

（ js/vendor替换了前面示例中的js/bootstrap.bundle ）

 entry: { 'js/vendor': 'bootstrap-loader', ... }, ... plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", }), new webpack.optimize.CommonsChunkPlugin( "js/vendor", "js/vendor.bundle.js" ) ], 

现在我没有将bootstrap捆绑到文件js/bootstrap.bundle.js ，而是列出我的供应商插件并将它们全部捆绑到js/vendor.bundle.js ，这些将根据CommonsChunkPlugin的文档在其他条目之间共享。

考虑到这一点，我现在能够使用来自不同捆绑的模态函数。