Webpack 5配置求助：将指定JS模块暴露至浏览器全局作用域

云原生阿岚

2026-6-14

解决Webpack打包后全局变量无法访问的问题

问题背景

现有项目目录结构：

temp
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /src
    |- /components
        |- button1.js
        |- button2.js
    |- id_selectors.js
    |- index.js
  |- /templates
    |- index.js
  |- /dist
    |- final.js
  |- /node_modules

页面中通过onclick="btn2Clicked()"调用函数时触发ReferenceError错误，原因是Webpack默认将模块变量封装在局部作用域，无法直接在浏览器全局访问。要求不修改id_selectors.js、button1.js、button2.js原文件，仅通过调整webpack.config.js配置和修改src/index.js，将这三个文件的变量暴露至window全局作用域。

解决方案

1. 更新webpack.config.js配置

利用Webpack 5的output.library配置项，将打包后的模块暴露为全局对象：

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'final.js',
        path: __dirname + '/dist',
        // 配置library，将模块内容挂载到window对象
        library: {
            name: 'MyApp', // 自定义全局对象名称，可按需修改
            type: 'window' // 指定暴露到window全局作用域
        }
    },
};

2. 修改src/index.js入口文件

在入口文件中导入目标模块，并将需要全局访问的变量手动挂载到window：

// 导入所有目标模块
import './id_selectors.js';
import './components/button1.js';
import './components/button2.js';

// 将变量挂载到window，使其成为全局可访问对象
window.btn1 = btn1;
window.btn2Clicked = btn2Clicked;