Webpack：构建前修改依赖的正确方法

Great question! When migrating from RequireJS (AMD) to Webpack, handling those special plugin-style dependencies like requirejs-dplugins/jquery!attributes/classes,effects is a common pain point. The good news is you can replicate that exact dependency transformation logic in Webpack using either a custom loader (most straightforward, since it mirrors the AMD plugin pattern) or a resolver plugin. Let's break down both approaches:

Option 1: Custom Loader (Recommended) #

The RequireJS syntax plugin!resource maps directly to Webpack's loader!resource pattern, so we can turn the old requirejs-dplugins/jquery plugin into a simple Webpack loader that processes the resource string (the part after the !) and generates the correct jQuery imports.

Step 1: Create the Custom Loader #

Make a file called requirejs-jquery-loader.js in your project root:

module.exports = function(depsString) {
  // Replicate the original AMD plugin's logic: split dependencies, add "core", map to jquery/src paths
  const jqueryModules = ["core"].concat(depsString.split(/, */)).map(amid => `jquery/src/${amid}`);
  
  // Generate code that imports all required jQuery modules and exports the jQuery object
  return `
    // Import all required jQuery components
    ${jqueryModules.map(module => `import '${module}';`).join('\n')}
    // Import the core jQuery and export it
    import $ from 'jquery/src/core';
    export default $;
  `;
};

Step 2: Configure Webpack to Use the Loader #

Update your webpack.config.js to alias the old plugin name to your new loader, so Webpack recognizes the requirejs-dplugins/jquery! syntax:

const path = require('path');

module.exports = {
  // ... your existing Webpack config
  resolveLoader: {
    alias: {
      // Map the old plugin name to our custom loader
      'requirejs-dplugins/jquery': path.resolve(__dirname, './requirejs-jquery-loader.js')
    }
  }
};

That's it! Now when Webpack encounters require('requirejs-dplugins/jquery!attributes/classes,effects'), it'll run your loader on the attributes/classes,effects string, generate the necessary imports, and export the fully loaded jQuery object—just like the original AMD plugin did.

Option 2: Custom Resolver Plugin #

If you prefer to handle this at the module resolution level (instead of using a loader), you can write a Webpack resolver plugin that rewrites the dependency request before it's processed.

Step 1: Add the Plugin to Webpack Config #

Add this directly to your webpack.config.js:

class RequireJSJQueryResolver {
  apply(compiler) {
    // Hook into the resolve process
    compiler.hooks.resolve.tap('RequireJSJQueryResolver', (resolveContext) => {
      const request = resolveContext.request;
      
      // Check if the request matches the old plugin pattern
      if (request.startsWith('requirejs-dplugins/jquery!')) {
        // Extract the dependency string after the !
        const depsString = request.replace('requirejs-dplugins/jquery!', '');
        // Replicate the original mapping logic
        const jqueryModules = ["core"].concat(depsString.split(/, */)).map(amid => `jquery/src/${amid}`);
        
        // Replace the original request with a combined import of all jQuery modules
        // We'll use a virtual module that imports everything and exports jQuery
        resolveContext.request = `data:text/javascript,
          ${jqueryModules.map(module => `import '${module}';`).join('\n')}
          import $ from 'jquery/src/core';
          export default $;
        `;
      }
    });
  }
}

module.exports = {
  // ... your existing config
  plugins: [
    new RequireJSJQueryResolver()
  ]
};

This plugin intercepts any request starting with requirejs-dplugins/jquery!, transforms the dependencies, and replaces the request with a virtual module that handles the imports.

Key Notes #

• Double-check that the jquery/src/[module] paths match your installed jQuery version (some versions might have slightly different folder structures).
• If you're using ES modules instead of CommonJS, the logic still works—Webpack handles both seamlessly.
• The loader approach is generally easier to maintain, as it aligns with Webpack's native loader pattern for processing resources.

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