如何使用Webpack 3实现JS基础导出，让外部可访问对象o？

Great question! When Webpack wraps your code in an IIFE, that o object gets locked inside the function's scope—so it's no wonder you can't access it from the host page. Here are some solid alternative approaches to expose it, beyond whatever ideas you've already got:

1. Explicitly mount o to the global window object #

This is the most straightforward fix, requiring just one line added to your original code. By assigning o to a property on window, you force it into the global scope regardless of Webpack's wrapping:

var o = o || {};
o.showMsg = function () {
  console.log("something else");
};
// Add this line to expose o globally
window.o = o;
o.showMsg();

Once bundled, any script on the host page can access o directly (either via o or window.o).

2. Use Webpack's output.library configuration #

Instead of modifying your business code, you can configure Webpack to automatically expose o to the global scope. Update your webpack.config.js with these settings:

module.exports = {
  // ... your existing config
  output: {
    filename: 'bundle.js',
    // Name of the global variable to expose
    library: 'o',
    // Target environment: mount to window for browsers
    libraryTarget: 'window'
    // For Webpack 5+, use this syntax instead:
    // library: {
    //   name: 'o',
    //   type: 'window'
    // }
  }
};

Webpack will handle the rest—after bundling, o will be available as a global variable on the host page.

3. Build for UMD (Universal Module Definition) #

If you need your code to work across multiple environments (browser globals, Node.js, AMD), use the UMD format. This lets o adapt to the environment it's running in:

module.exports = {
  output: {
    filename: 'bundle.js',
    library: 'o',
    libraryTarget: 'umd',
    // For Webpack 5+
    // library: {
    //   name: 'o',
    //   type: 'umd'
    // },
    // Ensure compatibility with different global objects
    globalObject: 'this'
  }
};

In browsers, this will automatically mount o to window; in Node.js, it'll export as a CommonJS module. Perfect for reusable code.

4. Use ES Modules and module-type script tags #

For a modern, scope-safe approach, convert your code to ES Modules and configure Webpack to output an ES Module bundle. Then import it in the host page using type="module".

First, update your script to use ES Module syntax:

export const o = {};
o.showMsg = function () {
  console.log("something else");
};
o.showMsg();

Then adjust your Webpack config:

module.exports = {
  output: {
    filename: 'bundle.js',
    library: {
      type: 'module'
    }
  },
  experiments: {
    // Enable ES Module output (required for Webpack 5+)
    outputModule: true
  }
};

Finally, import it in the host page:

<script type="module" src="bundle.js"></script>
<!-- Access o in another module script -->
<script type="module">
  import { o } from './bundle.js';
  o.showMsg(); // Works perfectly
</script>

This avoids polluting the global scope entirely, which is ideal for modern front-end projects.

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