如何使用Webpack合并所有文件为单文件且不包裹JavaScript文件，打包类为包？

Got it, let's break down exactly how to meet your two key requirements: bundling all files into a single JavaScript file with no extra Webpack-generated wrapping code, and using allImport.js to consolidate all your classes into a single usable package.

Step 1: Configure Webpack for Unwrapped Single-File Output #

By default, Webpack wraps your bundled code in a module function (like (function(){...})()) to handle module scoping. To remove this, we'll tweak the output settings in your webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/allImport.js', // Use your consolidation file as the entry point
  output: {
    filename: 'bundle.js', // Your final single bundled file
    path: path.resolve(__dirname, 'dist'),
    library: 'MyClassLibrary', // Customize this to your preferred global package name
    libraryTarget: 'var', // Expose the package as a global variable (no wrapping)
    libraryExport: 'default', // Export the default export from allImport.js
    clean: true, // Clear the dist folder on each build
  },
  mode: 'production', // Use 'development' if you want unminified code
  optimization: {
    usedExports: true, // Only bundle code that's actually used
  },
  // Add Babel support if you're using ES6+ features (optional but recommended)
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

The magic here is libraryTarget: 'var'—it tells Webpack to assign your bundled code directly to the global variable you named, skipping any module wrapping functions.

Step 2: Build Your allImport.js Class Consolidator #

In your src folder, create allImport.js to import all your classes and export them as a single package:

// Import all your individual classes
import User from './User.js';
import Product from './Product.js';
import Order from './Order.js';

// Export them as a single object (this becomes your package)
export default {
  User,
  Product,
  Order,
  // Add any other classes you need here
};

This file acts as the "entry point" for Webpack, so it will pull in all your classes and bundle them together in the correct order (handling dependencies automatically).

Step 3: Test the Result #

After running npx webpack to build your bundle, you can use it directly in an HTML file:

<script src="./dist/bundle.js"></script>
<script>
  // Access your classes via the global package name you set
  const newUser = new MyClassLibrary.User('John Doe');
  const newProduct = new MyClassLibrary.Product('Laptop', 999);
</script>

If you inspect the bundle.js file in your dist folder, you'll see it's just the merged code of your classes—no extra Webpack wrapping functions cluttering things up.

Quick Extra Tips #

• If you don't need a global package (just an unwrapped single file), remove the library and libraryTarget settings, and add output.iife: false to your config. This will output raw merged code with no wrapping at all.
• If you have circular dependencies between classes, Webpack will handle them automatically—no need to worry about manual ordering.

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