如何正确处理Webpack和jQuery的依赖关系

我有一个基于Vue CLI创建的项目，并在项目中添加MaterializeCSS。我改变了我的webpack.dev.conf.js，webpack.prod.conf.js和webpack.base.conf.js如下（仅supppose相关部分）：如何正确处理Webpack和jQuery的依赖关系

开发和生产线：

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

基地：

resolve: { 
extensions: ['.js', '.vue', '.json'], 
alias: { 
    '$': 'jquery', 
    'jQuery': 'jquery', 
    'window.$': 'jquery', 
    'window.jQuery': 'jquery',  
    '@': resolve('src'), 
    'vue$': 'vue/dist/vue.esm.js' 
}

的main.js有这个内容：

当我打电话$('#modal').modal('open')，在初始化之后，我收到的消息：

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_jquery__(...).modal is not a function 
at Object.displayLoading (eval at <anonymous> (0.js:278), <anonymous>:10:55) 
at VueComponent.searchBCP (eval at <anonymous> (0.js:293), <anonymous>:107:63) 
at boundFn (eval at <anonymous> (app.js:810), <anonymous>:125:14) 
at HTMLButtonElement.invoker (eval at <anonymous> (app.js:810), <anonymous>:1659:18) 
displayLoading @ display-loading.js?d781:6 
searchBCP @ script.js?7493:104 
boundFn @ vue.esm.js?65d7:124 
invoker @ vue.esm.js?65d7:1658

我的问题也是我处理VueJS指令和Materializecss，正确使用方法。有没有人遇到过这个困难？

来源

2017-04-12 Fabio Fogliarini Brolesi

你缺少一个想如果你在myfile.js参考$你应该在main.js指的jQuery 文件中正确导入：

require("imports-loader?$=jquery!./myfile.js");

这将增加myfile.js：

var $ = require("jquery");

请参阅参考：https://webpack.github.io/docs/shimming-modules.html

来源

2017-04-12 01:40:58

如果您想阻止jQuery在运行时捆绑并检索其依赖项，则可以在您的webpack配置文件中使用externals配置。

externals: { 
    $: "jquery", 
    jQuery: "jquery", 
    "window.jQuery": "jquery" 
}

来源

2017-04-12 03:33:02 Ricky

如何正确处理Webpack和jQuery的依赖关系

回答

相关问题