我在我的应用程序中使用Webpack,在其中我创建了两个入口点 - 所有JavaScript文件/代码的bundle.js,以及jQuery和React等所有库的vendors.js.我怎么做才能使用jQuery作为依赖项的插件,我想在vendors.js中也有它们？如果这些插件有多个依赖项怎么办？

目前我正在尝试使用这个jQuery插件 - https://github.com/mbklein/jquery-elastic.Webpack文档提到了applyPlugin和imports-loader.我使用了providePlugin,但仍然没有jQuery对象.以下是我的webpack.config.js的样子 -

var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';

var config = {
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.module.noParse.push(new RegExp(path));
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jQuery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
    ],
    entry: {
        app: ['./public/js/main.js'],
        vendors: ['react','jquery']
    },
    resolve: {
        alias: {
            'jquery': node_dir + '/jquery/dist/jquery.js',
            'jquery.elastic': lib_dir …

1. ProvidePlugin()

看起来像是一种常用的方法.有一个关于它的要点,展示如何将whatwg-fetch polyfill包含在Webpack构建中.StackOverflow上的很多答案都在这里和这里使用它.

new webpack.ProvidePlugin({
  '$': 'jquery',
  'jQuery': 'jquery',
  'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
})

优点

• 有用.(如果我遗漏了某些内容,请更新此列表)

缺点

• 需要在Webpack配置中跟踪全局库.

2. entry: [...]

当我在这个要点中发现它时,我对这种方法感到有些惊讶,但它的效果也一样.

entry: [
    'babel-polyfill',
    'whatwg-fetch',
    'jquery',
    'webpack-hot-middleware/client',
    path.join(process.cwd(), 'app/app.js')
],

优点

• 有用.
• 我可以ProvidePlugin()完全放弃.

缺点

• 需要在Webpack配置中跟踪全局库.

3.顶级 import

这个非常简单,请看这个app.js示例.此文件是React应用程序的入口点.

/**
 * app.js
 */

import 'whatwg-fetch';
import 'babel-polyfill';
import 'jquery';

优点

• 它的工作原理也一样.
• 轻松添加/删除.无需触摸Webpack配置.

缺点

• 看起来这种方法看起来不适用于jQuery插件,例如bootstrap.js.

观察:在所有三种方法之间,我没有注意到束大小的任何变化.

是否有一种推荐的使用Webpack(和React)处理全局库的方法？这些解决方案中的任何一个都会在服务器端渲染的情况下引发问题吗？

谢谢!