有几种方法可以处理全局变量：
1. 将变量放入模块中。
Webpack 仅评估模块一次，因此您的实例保持全局状态并在模块之间传递更改。所以如果你创建类似的东西globals.js并导出所有全局变量的对象，然后您可以import './globals'并读/写这些全局变量。您可以导入到一个模块中，从函数中更改对象，然后导入到另一个模块中并读取函数中的这些更改。还要记住事情发生的顺序。 Webpack 将首先获取所有导入并按顺序加载它们entry.js。然后就会执行entry.js。因此，在哪里读取/写入全局变量很重要。是来自模块的根范围还是稍后调用的函数？
配置文件
export default {
FOO: 'bar'
}
一些文件.js
import CONFIG from './config.js'
console.log(`FOO: ${CONFIG.FOO}`)
Note：如果您希望实例是new每次，然后使用ES6级 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes。传统上，在 JS 中，您会将类大写（而不是对象的小写），例如
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()
2.使用Webpack的提供插件 https://webpack.js.org/plugins/provide-plugin/.
以下是如何使用 Webpack 的 ProvidePlugin 来做到这一点（这使得模块在每个模块中都可以作为变量使用，并且仅在您实际使用它的模块中可用）。当您不想继续打字时这很有用import Bar from 'foo'一次又一次。或者你可以在这里引入像 jQuery 或 lodash 这样的全局包（尽管你可以看看 Webpack 的外部 https://webpack.js.org/configuration/externals/).
步骤 1. 创建任意模块。例如，一组全局实用程序会很方便：
utils.js
export function sayHello () {
console.log('hello')
}
步骤 2. 为模块命名并添加到 ProvidePlugin：
webpack.config.js
var webpack = require("webpack");
var path = require("path");
// ...
module.exports = {
// ...
resolve: {
extensions: ['', '.js'],
alias: {
'utils': path.resolve(__dirname, './utils') // <-- When you build or restart dev-server, you'll get an error if the path to your utils.js file is incorrect.
}
},
plugins: [
// ...
new webpack.ProvidePlugin({
'utils': 'utils'
})
]
}
现在只需致电utils.sayHello()在任何 js 文件中，它应该可以工作。如果您将开发服务器与 Webpack 一起使用，请确保重新启动开发服务器。
注意：不要忘记告诉你的 linter 有关全局的信息，这样它就不会抱怨。例如，参见我的在这里回答 ESLint https://stackoverflow.com/questions/34209063/how-do-you-expose-a-global-javascript-function-without-eslint-no-unused-var-erro/40416449#40416449.
3.使用Webpack的定义插件 https://webpack.js.org/plugins/define-plugin/.
如果您只想在全局变量中使用 const 和字符串值，那么您可以将此插件添加到 Webpack 插件列表中：
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
像这样使用它：
console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
4. 使用全局窗口对象（或Node的全局）。
window.foo = 'bar' // For SPA's, browser environment.
global.foo = 'bar' // Webpack will automatically convert this to window if your project is targeted for web (default), read more here: https://webpack.js.org/configuration/node/
您将看到这通常用于 polyfill，例如：window.Promise = Bluebird
5. 使用类似的包dotenv https://github.com/motdotla/dotenv.
（对于服务器端项目） dotenv 包将采用本地配置文件（如果有任何密钥/凭据，您可以将其添加到 .gitignore 中）并将您的配置变量添加到 Node 的进程.env https://nodejs.org/api/process.html#process_process_env object.
// As early as possible in your application, require and configure dotenv.
require('dotenv').config()
创建一个.env文件位于项目的根目录中。以以下形式在新行中添加特定于环境的变量NAME=VALUE。例如：
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
就是这样。
process.env现在有您在中定义的键和值.env file.
var db = require('db')
db.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
})
Notes
关于Webpack的外部 https://webpack.js.org/configuration/externals/，如果您想排除某些模块包含在构建的捆绑包中，请使用它。 Webpack 将使该模块全局可用，但不会将其放入您的包中。这对于像 jQuery 这样的大型库来说很方便（因为 tree shake 外部包在 Webpack 中不起作用 https://github.com/webpack/webpack/issues/2867），您已将这些内容加载到页面上的单独脚本标记中（可能来自 CDN）。
