在Webpack 3.8.1和以下版本中，我将$和jQuery作为全局变量公开，使事情工作得很好。

将jQuery作为项目依赖项安装。您可以省略@3.2.1安装最新版本或指定其他版本。

npm install --save jquery@3.2.1

如果尚未安装，则将expose-loader安装为开发依赖项。

npm install expose-loader --save-dev

配置Webpack为我们加载和公开jQuery。

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  entry: [
    // entry bits
  ],
  output: {
    // output bits
  },
  module: {
    rules: [
      // any other rules
      {
        // Exposes jQuery for use outside Webpack build
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
  plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

您混合了包括遗留供应商模块的不同方法。我是这样处理的:

1. 首选非最小化的CommonJS/AMD而不是dist

大多数模块在package.json的主字段中链接dist版本。虽然这对大多数开发人员都很有用，但对于webpack来说，最好使用src版本的别名，因为这样webpack可以更好地优化依赖关系(例如，当使用DedupePlugin时)。

// webpack.config.js

module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

然而，在大多数情况下，dist版本也可以很好地工作。

2. 使用ProvidePlugin注入隐式全局变量

大多数遗留模块依赖于特定全局变量的存在，就像jQuery插件在$或jQuery上所做的那样。在这种情况下，你可以配置webpack，每当它遇到全局$标识符时，将var $ = require("jquery")前置。

var webpack = require("webpack");

    ...
    
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

3.使用导入加载器来配置它

一些遗留模块依赖于它作为窗口对象。当模块在CommonJS上下文中执行时，This等于module.exports，这就成了一个问题。在这种情况下，您可以使用导入加载器覆盖它。

运行npm i imports-loader——save-dev然后

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

导入加载器还可以用于手动注入各种类型的变量。但是大多数时候，当涉及到隐式全局变量时，ProvidePlugin更有用。

4. 使用导入加载器禁用AMD

有一些模块支持不同的模块样式，比如AMD、CommonJS和legacy。然而，大多数情况下，他们首先检查define，然后使用一些古怪的代码来导出属性。在这些情况下，可以通过设置define = false强制使用CommonJS路径。

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

5. 使用脚本加载器(不再维护)全局导入脚本

如果不关心全局变量，只想让遗留脚本正常工作，也可以使用脚本加载器。它在全局上下文中执行模块，就像您通过<script>标记包含了它们一样。

6. 使用noParse包含大的dist

当没有AMD/CommonJS版本的模块，你想包括dist，你可以标记这个模块为noParse。然后webpack将只包含模块而不解析它，这可以用来提高构建时间。这意味着任何需要AST的特性(如ProvidePlugin)都不能工作。

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}

我不知道我是否很好地理解你要做的事情，但我不得不使用jQuery插件，需要jQuery在全局上下文中(窗口)，我把以下内容放在我的entry.js:

var $ = require('jquery');
window.jQuery = $;
window.$ = $;

我只需要我想要的任何地方的jqueryplugin.min.js和窗口。$按预期与插件一起扩展。

这适用于webpack 3:

在webpack.config.babel.js文件中:

resolve: {
    alias: {
         jquery: "jquery/src/jquery"
    },
 ....
}

并使用ProvidePlugin

new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
    })

编辑:有时候你想把webpack简单地用作一个简单的web项目的模块打包器——让你自己的代码有条理。下面的解决方案是为那些只是想要一个外部库在他们的模块中正常工作的人准备的——而不需要花费大量的时间在webpack设置上。(-1后编辑)

快速简单(es6)解决方案，如果你仍然挣扎或想避免外部配置/额外的webpack插件配置:

<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>

在模块内部:

const { jQuery: $, Underscore: _, etc } = window;

在webpack.config.js文件中添加以下内容:

 var webpack = require("webpack");
 plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],

使用npm安装jQuery:

$ npm i jquery --save

在app.js文件中添加以下行:

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

这对我很管用。：）