如何在非Webpack项目中引入Webpack编译的模块与全局函数？

刚好之前帮团队处理过类似的新旧项目兼容场景，给你梳理几个关键的配置调整和最佳实践，应该能解决你的问题：

核心问题拆解 #

Webpack 默认会把代码包裹在模块隔离的作用域里，不会主动暴露到全局 window，而你的旧项目是基于全局命名空间运行的，所以直接引入打包后的文件肯定找不到变量。另外 ProvidePlugin 只是帮你在模块内部自动注入依赖，不是把变量抛到全局，这是很多人容易踩的坑。

1. 配置 Webpack 把核心内容暴露到全局 #

首先要调整 output 配置，让打包后的代码主动挂载到 window 对象上，这样旧项目就能直接访问。

Webpack 4/5 通用配置： #

module.exports = {
  output: {
    // 指定全局对象的名称，比如叫 MyApp
    library: 'MyApp',
    // 把这个对象挂载到 window 上
    libraryTarget: 'window',
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

Webpack 5+ 更清晰的写法： #

output: {
  filename: 'app.bundle.js',
  path: path.resolve(__dirname, 'dist'),
  library: {
    name: 'MyApp',
    type: 'window' // 明确指定挂载到 window
  }
}

然后在你的入口文件（比如 src/index.js）里，主动导出需要全局访问的内容：

import Component1 from './components/Component1';
import ReactDOM from 'react-dom/client';

// 把组件和依赖导出，这样会被挂载到 window.MyApp 上
export { Component1, ReactDOM };

这样引入 app.bundle.js 后，就能通过 window.MyApp.Component1 和 window.MyApp.ReactDOM 访问到内容，不用再通过 CDN 引入 ReactDOM 避免冲突。

2. 让遗留全局函数 GlobalFunction 真正全局可用 #

ProvidePlugin 的作用是在模块内部自动注入依赖，不用你手动写 import GlobalFunction from 'xxx'，但它不会把变量暴露到全局。要让旧项目能直接调用 GlobalFunction，需要在入口文件里手动挂载到 window：

// 先导入你的遗留函数（如果已经用 ProvidePlugin 配置过，这里可以直接用）
import GlobalFunction from './legacy/GlobalFunction';

// 挂载到 window，让全局环境能访问
window.GlobalFunction = GlobalFunction;

如果你的 ProvidePlugin 配置是这样的：

plugins: [
  new webpack.ProvidePlugin({
    GlobalFunction: ['./legacy/GlobalFunction', 'default']
  })
]

那入口文件里甚至可以不用手动 import，直接写 window.GlobalFunction = GlobalFunction 就行，因为 ProvidePlugin 已经帮你注入了。

3. 处理 splitChunks 生成的 vendor.js #

因为 app.bundle.js 依赖 vendor.js 里的第三方库（比如 React、ReactDOM），所以在旧项目的 HTML 里必须先引入 vendor.js，再引入 app.bundle.js：

<!-- 先加载依赖包 -->
<script src="/dist/vendor.js"></script>
<!-- 再加载你的业务组件包 -->
<script src="/dist/app.bundle.js"></script>

这样能确保 app.bundle.js 运行时，所有依赖都已经加载完成。

4. 调试验证技巧 #

如果还是有问题，可以按以下步骤排查：

• 打开浏览器控制台，输入 window.MyApp，看这个对象是否存在，里面有没有你导出的 Component1 和 ReactDOM；
• 输入 GlobalFunction，检查是否能直接调用；
• 暂时把 Webpack 的 mode 改成 development，压缩后的代码可能会隐藏变量名，调试起来更麻烦；
• 绝对不要同时通过 CDN 和 Webpack 打包引入同一个依赖（比如 ReactDOM），会导致重复挂载，引发冲突。

完整配置示例 #

Webpack 配置文件： #

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js',
    library: 'MyApp',
    libraryTarget: 'window',
    clean: true // 每次打包清空 dist 目录
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendor' // 生成的依赖包命名为 vendor.js
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      // 自动在模块内注入 GlobalFunction
      GlobalFunction: ['./src/legacy/GlobalFunction', 'default']
    })
  ],
  module: {
    rules: [
      // 处理 React/JSX 的 Babel 配置
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

入口文件 src/index.js： #

import Component1 from './components/Component1';
import ReactDOM from 'react-dom/client';

// 暴露全局函数
window.GlobalFunction = GlobalFunction;
// 暴露组件和 ReactDOM 到 window.MyApp
export { Component1, ReactDOM };

旧项目 HTML 中引入： #

<div id="root"></div>

<script src="/dist/vendor.js"></script>
<script src="/dist/app.bundle.js"></script>
<script>
  // 测试全局函数
  GlobalFunction();
  
  // 渲染 React 组件
  const root = MyApp.ReactDOM.createRoot(document.getElementById('root'));
  root.render(MyApp.Component1());
</script>

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