Webpack作用域问题：直接引入正常，打包后无法访问变量

咱先来说说为啥会出现这个差异：

• 直接引入app.js时，你的代码运行在全局作用域里，var test = "TEST"会自动挂载到window对象上，所以控制台能直接调用。
• 而Webpack打包时，默认会把每个模块包裹在独立的函数作用域（类似立即执行函数IIFE）里，模块内的变量都是局部变量，不会自动暴露到全局，所以控制台找不到test，就会抛出作用域相关的错误。

接下来给你几个靠谱的解决办法，按需选择：

1. 手动挂载到全局（简单但不推荐） #

如果只是临时测试或者极小项目，可以直接把变量挂载到window对象上：

// 你的模块代码里
var test = "TEST";
window.test = test; // 显式挂载到全局

这样打包后，控制台就能直接调用test了，但这种方式会污染全局作用域，大型项目不建议用。

2. 配置Webpack的output.library（推荐） #

通过Webpack的配置，把整个打包后的模块暴露为全局对象，既规范又不会乱污染全局：
修改你的webpack.config.js：

module.exports = {
  entry: './src/app.js',
  output: {
    filename: './dist/bundle.js',
    library: 'MyApp', // 自定义全局对象名
    libraryTarget: 'window' // 指定挂载到window对象上
  }
};

然后在模块里导出变量：

// 你的模块代码
export const test = "TEST";

或者在app.js里统一导出：

// app.js
import { test } from './your-module.js';
export { test };

打包完成后，控制台就可以通过MyApp.test访问这个变量了。

3. 开发时动态导入（适合调试场景） #

如果只是开发调试时需要访问变量，可以用ES模块的动态导入功能，在控制台执行：

import('./dist/bundle.js').then(module => {
  console.log(module.test); // 访问导出的test变量
});

注意这种方式需要你的Webpack配置支持ES模块输出（比如设置output.module: true），且浏览器环境支持ES模块。

4. 使用expose-loader（精准暴露单个变量） #

如果你只想暴露某个特定变量到全局，可以用expose-loader：
首先安装loader：

npm install expose-loader --save-dev

然后修改webpack.config.js：

module.exports = {
  entry: './src/app.js',
  output: {
    filename: './dist/bundle.js'
  },
  module: {
    rules: [
      {
        test: require.resolve('./src/your-module.js'), // 指定要处理的模块
        use: [{
          loader: 'expose-loader',
          options: { exposes: ['test'] } // 要暴露的变量名
        }]
      }
    ]
  }
};

这样打包后，test就会成为全局变量，控制台可以直接调用。

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