Webpacking和自定义文件:未定义jQuery

Question

我正在使用webpack来连接JS库和我自己的JS文件。目前的设置是这样的

var wpStream = require('webpack-stream')';
var files = ['jquery.js', 'angular.js', 'app.js', 'controller.js', 'etc.js'];

gulp.task('pack', function(){
  return gulp.src(files)
    .pipe(wpStream({
      output:{filename: 'bundle.js'}
    }).pipe(gulp.dest('dist'));
});

这样做效果很好。我的文件创建完成，其中包含files数组中指定的所有内容。然而，在页面加载时，我得到了错误jQuery is not defined。此外，在我的控制台中，当我输入jQuery时，出现的不是jQuery，而是jQuery111206520785381790835。当我附加一个点来查看方法列表时，只有普通的对象方法(hasOwnProperty、toString等)。

如何访问jQuery？那webpack是怎么处理的呢？

Answer 1

您必须使用webpack ProvidePlugin使jQuery可全球访问

var webpack = require('webpack');
var wpStream = require('webpack-stream');
var path = require('path');
var files = ['app.js', 'controller.js', 'etc.js'];

gulp.task('pack', function () {
    return gulp.src(files)
        .pipe(wpStream(
            {
                output: {
                    filename: 'bundle.js'
                },
                plugins: [
                    new webpack.ProvidePlugin({
                        angular: "angular",
                        $: "jquery",
                        jQuery: "jquery"
                    })
                ],
                resolve: {
                    root: path.resolve('./vendor'), // directory that contains jquery.js and angular.js
                    extensions: ['', '.js']
                }
            }
        ).pipe(gulp.dest('dist'));
});