Webpacking jQuery 和自定义文件：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'));
});