如何通过webpack导入完整js文件并使用其中的变量与函数

你写的import './functions.js'属于副作用导入，只会执行functions.js中的代码，不会将该文件导出的变量注入到当前文件的作用域中，因此直接访问x会触发未定义报错。

根据你的使用场景，可选择以下任意一种导入写法：

• 按需导入指定变量（最适配你当前的导出写法）
  将index.js的导入语句修改为如下内容即可：

  import { x } from './functions.js';
  console.log(x); // 正常输出0
  

  如果需要给导入的变量设置别名避免命名冲突，可以写成import {x as customX} from './functions.js'，后续通过customX访问该变量即可。
• 全量导入到命名空间对象
  如果需要用到functions.js中导出的多个变量/函数，可以把所有导出内容挂载到同一个对象上调用：

  import * as funcModule from './functions.js';
  console.log(funcModule.x); // 正常输出0
  

• 调整为默认导出适配（可选）
  如果你把functions.js的导出方式改为默认导出：

  // functions.js 调整后代码
  export default 0;
  

  就可以用默认导入的写法直接赋值变量：

  import x from './functions.js';
  console.log(x); // 正常输出0
  

内容的提问来源于stack exchange，提问作者YannisHaismannPlugimmo