您已经混合了各种方法来包括旧供应商模块。这是我要解决的方法：
1.优先使用最小的CommonJS / AMD dist
大多数模块
dist在其
main字段中链接版本
package.json。尽管这对于大多数开发人员很有用，但对于webpack而言，最好为
src版本加上别名，因为webpack能够更好地优化依赖关系（例如，使用时
DedupePlugin）。
// webpack.config.jsmodule.exports = { ... resolve: { alias: { jquery: "jquery/src/jquery" } }};但是，在大多数情况下，该
dist版本也可以正常工作。
2.使用ProvidePlugin
注入隐式全局变量
大多数旧版模块都依赖于特定全局变量的存在，例如jQuery插件on
$或
jQuery。在这种情况下，您可以配置webpack，使其在
var $ =require("jquery")每次遇到全局$标识符时都在前面。
var webpack = require("webpack"); ... plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ]3.使用imports-loader进行配置this
一些旧模块依赖于
this成为
window对象。当模块在
thisequals
的CommonJS上下文中执行时，这将成为问题
module.exports。在这种情况下，您可以
this使用imports-
loader覆盖。
运行
npm i imports-loader --save-dev然后
module: { loaders: [ { test: /[/\]node_modules[/\]some-module[/\]index.js$/, loader: "imports-loader?this=>window" } ]}imports-loader也可以用于手动注入各种变量。但是在大多数情况下，
ProvidePlugin当涉及到隐式全局变量时，它会更有用。
4.使用imports-loader禁用AMD
有些模块支持不同的模块样式，例如AMD，CommonJS和legacy。但是，大多数情况下，它们首先检查
define然后使用一些古怪的代码导出属性。在这些情况下，通过设置可以帮助强制CommonJS路径
define= false。
module: { loaders: [ { test: /[/\]node_modules[/\]some-module[/\]index.js$/, loader: "imports-loader?define=>false" } ]}5.使用脚本加载器全局导入脚本
如果您不关心全局变量，而只希望使用旧脚本，则也可以使用脚本加载器。它将在全局上下文中执行模块，就像您已通过
<script>标签将其包括在内一样。
6. noParse
用于包括大距离
如果该模块没有AMD /CommonJS版本，并且要包含
dist，则可以将此模块标记为
noParse。然后，webpack将仅包含模块而不对其进行解析，这可用于缩短构建时间。这意味着任何需要AST的功能（例如
ProvidePlugin）都将无法使用。
module: { noParse: [ /[/\]node_modules[/\]angular[/\]angular.js$/ ]}
