如何通过Webpack将模块设为全局（window）可访问？

下面是几种可行的方案，适用于将src文件夹内的模块暴露到全局window对象：

方案1：手动挂载到window（最直接） #

不需要额外配置Webpack，直接在你的模块文件里添加挂载代码即可。比如你的模块文件是src/myModule.js：

// src/myModule.js
// 你的模块核心代码
const MyModule = {
  sayHello: () => console.log('Hello from MyModule')
};

// 挂载到window对象，使其全局可访问
window.MyModule = MyModule;

// 同时保留导出，不影响模块化使用
export default MyModule;

之后在项目入口文件（比如src/index.js）中引入该模块：

// src/index.js
import './myModule.js';

打包后，在浏览器控制台就能直接调用window.MyModule或MyModule。

方案2：使用expose-loader #

这个loader专门用于将模块暴露到全局作用域，适合不想修改模块源码的场景。

1. 首先安装依赖：

npm install expose-loader --save-dev

2. 修改Webpack配置文件（webpack.config.js）：

module.exports = {
  // 其他配置（如entry、output等）
  module: {
    rules: [
      {
        // 匹配src下的目标模块
        test: require.resolve('./src/myModule.js'),
        use: [
          {
            loader: 'expose-loader',
            options: {
              // 指定全局变量名
              exposes: 'MyModule'
            }
          }
        ]
      }
    ]
  }
};

3. 在入口文件引入模块：

import './myModule.js';

打包后，window.MyModule就会全局可用。

方案3：使用Webpack的ProvidePlugin（自动注入+全局访问） #

ProvidePlugin主要用于自动注入模块到所有模块中，如果需要同时挂载到window，可以结合手动挂载或者额外配置：

1. 修改Webpack配置：

const webpack = require('webpack');

module.exports = {
  // 其他配置
  plugins: [
    new webpack.ProvidePlugin({
      // 自动将MyModule注入到所有模块，无需手动import
      MyModule: ['./src/myModule.js', 'default']
      // 若模块是命名导出，改为['./src/myModule.js', 'MyModule']
    })
  ]
};

2. 若要让其在window上可访问，仍需在模块中添加挂载代码（同方案1），或者在入口文件中手动挂载：

// src/index.js
import MyModule from './myModule.js';
window.MyModule = MyModule;

这样既可以在代码中直接使用MyModule（无需import），也能在浏览器全局访问window.MyModule。

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