如何通过Webpack加载同一JS文件并应用多套Babel配置？

Absolutely! You can streamline your three-step Webpack build process into one by using query parameters in dynamic imports paired with conditional Babel loader configurations. This lets you serve two transpilation variants of your components based on browser class syntax support, all in a single build.

Here's a step-by-step implementation tailored to your use case:

1. Configure Webpack to Handle Query-Based Babel Rules #

Update your Webpack config to define two separate rules for .js files: one for your minimal-transpilation bundle, and another for the IE11-compatible version triggered by the enableTranspilation query parameter.

module.exports = {
  // ... your existing Webpack config (entry, output, plugins, etc.)
  module: {
    rules: [
      // Rule for IE11-compatible code (triggered by ?enableTranspilation)
      {
        test: /\.js$/,
        resourceQuery: /enableTranspilation/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: { ie: '11' },
                useBuiltIns: 'usage',
                corejs: 3,
                // Ensure class syntax is fully transpiled
                exclude: []
              }]
            ],
            plugins: ['@babel/plugin-transform-classes']
          }
        }
      },
      // Rule for modern browsers (minimal transpilation)
      {
        test: /\.js$/,
        exclude: /node_modules/,
        resourceQuery: { not: [/enableTranspilation/] },
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: { esmodules: true },
                useBuiltIns: 'usage',
                corejs: 3,
                // Skip transpiling class syntax for modern browsers
                include: []
              }]
            ]
          }
        }
      }
    ]
  }
};

2. Implement Browser Feature Detection & Dynamic Imports #

In your custom element loader script, add feature detection for class syntax, then dynamically import the appropriate bundle variant using the query parameter.

// Helper to detect ES6 class support
function supportsES6Classes() {
  try {
    // Attempt to parse and execute a basic class definition
    new Function('class Test {}')();
    return true;
  } catch (error) {
    return false;
  }
}

// Load the correct component bundle and initialize
(async () => {
  const componentModule = supportsES6Classes()
    ? await import('./components.js')
    : await import('./components.js?enableTranspilation');

  // Load polyfills and define custom elements
  await componentModule.loadWebComponentPolyfills();
  componentModule.defineAllCustomElements();
})();

3. Key Notes to Ensure Success #

• Automatic Chunk Generation: Webpack will generate two distinct chunks for the two components.js variants (with unique hashes), eliminating the need to manually track filenames and inject them via DefinePlugin.
• Lean Polyfill Inclusion: The useBuiltIns: 'usage' setting ensures only necessary polyfills are included in each bundle, keeping modern browser bundles lightweight while fully supporting IE11.
• Cache Safety: The query parameter tells Webpack to treat the two imports as separate modules, so their chunk hashes won’t conflict, and browsers will cache each variant correctly.
• Full Dependency Transpilation: The rules apply to components.js and all its dependencies, so you don’t need to modify individual files—Webpack will transpile the entire dependency tree according to the selected rule.

This setup replaces your three separate Webpack runs with a single build, while maintaining full compatibility across target browsers.

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