javascript - Webpacking jQuery 和自定义文件 : jQuery is undefined

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 让 jQuery 全局可访问 ProvidePlugin

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'));
});