webpack 模块变量(module variables)

在 Webpack 中，模块变量是指在模块内部定义的变量，可以通过导入其他模块来使用。模块变量可以提高代码的可维护性和可重用性。

定义模块变量

在一个模块中，可以使用 export 关键字来定义模块变量。例如：

// module.js
export const name = 'Alice';
export const age = 25;

在另一个模块中，可以使用 import 关键字来导入模块变量。例如：

// app.js
import { name, age } from './module.js';

console.log(`My name is ${name} and I am ${age} years old.`);

导出默认模块变量

除了导出多个变量外，还可以使用 export default 关键字来导出默认模块变量。例如：

// module.js
const city = 'New York';
export default city;

在另一个模块中，可以直接导入默认模块变量，无需使用花括号。例如：

// app.js
import city from './module.js';

console.log(`I live in ${city}.`);

导入整个模块

有时候，我们可能需要导入整个模块，而不仅仅是其中的某个变量。可以使用 * as 关键字来导入整个模块。例如：

// module.js
const country = 'USA';
export const language = 'English';

// app.js
import * as module from './module.js';

console.log(`I live in ${module.country} and speak ${module.language}.`);

总结

模块变量是 Webpack 中非常重要的概念，可以帮助我们更好地组织和管理代码。通过定义模块变量并导入其他模块，我们可以实现代码的模块化和复用，提高开发效率和代码质量。Webpack 提供了丰富的导入导出语法，让我们可以灵活地使用模块变量。