javascript – 在Webpack中使用jQuery

我正在从RequireJS迁移到Webpack,我在为模块需要jQuery时遇到了一些麻烦.

我知道有一些关于这方面的答案,我已经完成了它们,但我无法让它工作.这一个：Managing Jquery plugin dependency in webpack是我读过的那个.

我的webpack.config.js看起来像这样：

var webpack = require("webpack");
var bower_dir = __dirname + '/bower_components';

var config = {
    addvendor: function(name,path) {
        this.resolve.alias[name] = path;
        //this.module.noparse.push(new RegExp(path));
    },entry: {
        app: ['./app/js/main.js'],vendors: ['jquery','bootstrap']
    },resolve: { alias: {} },plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),new webpack.ProvidePlugin({
            $: "jquery",jQuery: "jquery","window.jquery": "jquery"
        })
    ],output: {
        path: './build',filename: 'bundle.js'
    },module: {
        noparse: [bower_dir + '/bootstrap/dist/js/bootstrap.min.js'],loaders: []
    }
};

config.addvendor('jquery',bower_dir + '/jquery/jquery.js');
config.addvendor('bootstrap',bower_dir + '/bootstrap/dist/js/bootstrap.min.js');

module.exports = config;

我正在使用ProvidePlugin在每个使用它的模块上都需要jQuery.
另外,我将供应商库放在vendors.js文件中,将我的模块放在main.js中.

我的main.js文件有几行代码只是为了测试$是否解析为jQuery：

$(".search-toggle").on("click",function(e) {
    e.preventDefault();
    $(".search-container").toggle();
});

我的index.html有以下几行：

<script src="<s:url  value="/resources/build/vendors.js"/>"></script>
<script src="<s:url  value="/resources/build/bundle.js"/>"></script>

当我运行我的应用程序时,我得到Uncaught TypeError：$即使$在全局范围内,也不是控制台中的函数.

我真的很感激你是否可以帮助我,因为我一直在编写和重写我的代码而无处可去.

非常感谢你提前！

解决方法

而不是webpack.ProvidePlugin,你可以使用 https://github.com/webpack/expose-loader：

装载机：[{  test：require.resolve(‘jquery’),  loader：’expose？$！expose？jQuery’,}]