您已经混合了如何包含遗留供应商module的不同方法。这就是我解决它的方式：

1. 更喜欢未缩小的 CommonJS/AMD dist

大多数moduledist在main其package.json. 虽然这对大多数开发人员很有用，但对于 webpack 最好为src版本设置别名，因为这样 webpack 能够更好地优化依赖项（例如，在使用 时DedupePlugin）。

// webpack.config.js

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

但是，在大多数情况下，该dist版本也能正常工作。

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

大多数遗留module依赖于特定全局变量的存在，就像 jQuery 插件在$或jQuery. 在这种情况下，您可以配置 webpack，以在var $ = require("jquery")每次遇到全局$标识符时进行前置。

var webpack = require("webpack");

    ...

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

3.使用imports-loader进行配置this

一些传统的module依赖于this作为window对象。当module在 CommonJS 上下文中执行时，这会成为一个问题，其中thisequals module.exports。在这种情况下，您可以this使用import-loader覆盖。

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

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

导入加载器也可用于手动注入各种变量。但大多数情况下，ProvidePlugin当涉及到隐式全局变量时，它更有用。

4.使用imports-loader禁用AMD

有些module支持不同的module样式，例如 AMD、CommonJS 和 legacy。然而，大多数时候他们首先检查define然后使用一些古怪的代码来导出属性。在这些情况下，通过设置define = false.

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

5.使用script-loader全局导入脚本

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

6.noParse用于包含大的 dist

当没有 AMD/CommonJS 版本的module并且您想要包含 时dist，您可以将此module标记为noParse. 然后 webpack 将只包含module而不解析它，这可以用来缩短构建时间。这意味着任何需要AST 的功能，如ProvidePlugin，都将不起作用。

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

对于对 jquery 的全局访问，存在几个选项。在我最近的 webpack 项目中，我想要全局访问 jquery，因此我将以下内容添加到我的插件声明中：

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

这意味着 jquery 可以通过全局引用 $ 和 jQuery 从 JavaScript 源代码中访问。

当然，你还需要通过 npm 安装 jquery：

$ npm i jquery --save

有关此方法的工作示例，请随时在github上 fork 我的应用程序

我不知道我是否非常了解您要做什么，但我必须使用需要 jQuery 处于全局上下文（窗口）中的 jQuery 插件，并且我将以下内容放入我的entry.js：

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

在我刚有需要的地方，我想的jqueryplugin.min.js和window.$扩展与插件如预期。

在使用 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'
    })
  ]
}

在您的 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.$ = $;

这对我有用。:)