webpack 作为模块打包工具可以支持 ES2015 模块，根据 CommonJS 或者 AMD 规范编写的模块。但是很多时候，当使用第三方 library 的时候，可以看出我们还期望有一些全局依赖，比如对于大家都知道 jquery 的 $。这可能也会创建一些需要被导出的全局变量。在此，我们会看到通过不同的方式去帮助 webpack 支持这些彼此割裂的模块。
dist 打包版本。
多数模块会在 package.json 的 main 字段中链接到 library 的 dist 版本。虽然对多数开发者来说这是有用的，但对于 webpack 来说更好的方式是链接到 src 版本的别名上，因为这样 webpack 能够更好地优化依赖。然而多数情况下 dist 版本也能正常运行。
// webpack.config.js
module.exports = {
...
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
}; ProvidePlugin
The ProvidePlugin 可以将模块作为一个变量，被 webpack 在其他每个模块中引用。只有你需要使用此变量的时候，这个模块才会被 require 进来。
多数之前遗留的模块，会依赖于已存在的某些特定全局变量，比如 jQuery 插件中的 $ 或者 jQuery。在这种场景，你可以在每次遇到全局标识符 $ 的时候，在 webpack 中预先设置 var $ = require(“jquery”)。
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}; imports-loader
imports-loader 在引用了之前遗留模块的代码中，插入必需的全局变量。
例如，某些遗留模块依赖于 this 作为 window 对象，而在 CommonJS 上下文中执行的 this 等同于 module.exports。在这种情况下，你可以使用 imports-loader 来替换重写 this。
webpack.config.js
module.exports = {
module: {
rules: [{
test: require.resolve("some-module"),
use: 'imports-loader?this=>window'
}]
}
};
webpack 中的模块支持不同的模块风格，比如AMD, CommonJS 以及之前的遗留模块。然而，通常会先检查 define，然后使用一些比较怪异的代码来导出属性。在这些情况下，可以通过设置 define = false，有助于强制使用 CommonJS 路径：
webpack.config.js
module.exports = {
module: {
rules: [{
test: require.resolve("some-module"),
use: 'imports-loader?define=>false'
}]
}
}; exports-loader
比如说，一个 library 创建了一个全局变量，它期望使用者通过全局变量去使用；在这种情况下，我们能够使用 exports-loader，将全局变量导出为 CommonJS 格式。比如，为了将 file 导出为 file 以及将 helpers.parse 导出为 parse：
webpack.config.js
module.exports = {
module: {
rules: [{
test: require.resolve("some-module"),
use: 'exports-loader?file,parse=helpers.parse'
// 在文件的源码中加入以下代码
// exports["file"] = file;
// exports["parse"] = helpers.parse;
}]
}
}; script-loader
script-loader 在全局上下文中执行代码，如同你在 script 标签中加入代码。在这种模式下，普通的 library 都能够正常运行。访问 require, module 等变量则是 undefined。
W> 文件作为字符串添加到 bundle 中。它不会被 webpack 压缩，因此如果使用了一个压缩后的版本，没有开发工具支持调试此 loader 添加的 library。
假设你有一个 legacy.js 文件包含……
GLOBAL_CONFIG = {};
...使用 script-loader...
require('script-loader!legacy.js'); ...基本上会生成：
eval("GLOBAL_CONFIG = {};"); noParse 选项
当模块没有 AMD/CommonJS 的版本时，并且你希望直接引入 dist版本，你可以将这个模块标记为 noParse。然后 webpack 将会直接引入这个模块并且不会解析它，这样可以用来改善构建时间。
W> 任何用到 AST 特性（比如 ProvidePlugin）都不会工作。
module.exports = {
module: {
noParse: /jquery|backbone/
}
};