如何用Webpack打包React组件时排除React/React Dom适配Magento2

Hey there! Let's walk through exactly how to bundle your React components without including React or ReactDOM, so you can load them separately via RequireJS in Magento2 and avoid duplicate framework code across components.

The key here is to tell Webpack that React and ReactDOM are external dependencies—meaning they shouldn't be bundled into your component code. Instead, Webpack will expect these libraries to be available globally (or via RequireJS) when your component runs in the Magento2 environment.

Update your webpack.config.js to add an externals section. This tells Webpack to map your import statements to global variables that RequireJS will provide:

module.exports = {
  entry: './src/your-component.jsx', // Your component entry file
  output: {
    filename: 'your-bundled-component.js',
    libraryTarget: 'umd' // Makes the bundle compatible with RequireJS, CommonJS, etc.
  },
  externals: {
    'react': 'React', // Maps `import React from 'react'` to the global `React` variable
    'react-dom': 'ReactDOM' // Maps `import ReactDOM from 'react-dom'` to global `ReactDOM`
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader' // Keep using babel-loader—no need to replace it!
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

You don't need to swap out babel-loader—just make sure your Babel setup correctly transpiles React syntax. Here's a typical .babelrc or babel.config.json:

{
  "presets": [
    "@babel/preset-env", // Transpiles modern JS to target browsers
    "@babel/preset-react" // Handles JSX and React-specific syntax
  ]
}

This ensures your component code is transpiled properly, but since Webpack is excluding React/ReactDOM, they won't end up in your final bundle.

Next, configure Magento2's RequireJS to load React and ReactDOM so they're available for your component. Create or update requirejs-config.js in your Magento2 theme or module:

var config = {
  paths: {
    // Use CDN paths or host files locally in your Magento static directory
    'React': 'https://unpkg.com/react@18/umd/react.production.min',
    'ReactDOM': 'https://unpkg.com/react-dom@18/umd/react-dom.production.min'
  },
  shim: {
    'React': {
      exports: 'React' // Tells RequireJS that `React` is the global variable to expose
    },
    'ReactDOM': {
      deps: ['React'], // Ensures React loads before ReactDOM
      exports: 'ReactDOM'
    }
  }
};

For production, it's better to download the React/ReactDOM files and host them in your Magento pub/static directory instead of using a CDN—this improves load times and reliability.

Make sure your component uses standard React imports (Webpack will handle translating these to RequireJS dependencies):

import React from 'react';

const MyMagentoReactComponent = () => {
  return (
    <div className="react-component">
      <h1>Hello from React in Magento2!</h1>
    </div>
  );
};

export default MyMagentoReactComponent;

When you run webpack, the bundled output will reference React as an external dependency instead of including it.

• Version Consistency: Always use the same React version in your development environment and in Magento2's RequireJS config to avoid compatibility bugs.
• Reuse Across Components: Any future React components you build can use the same Webpack externals setup, so they'll all share the single React/ReactDOM instance loaded by RequireJS.
• Testing: Test your bundled component in a Magento2 page to ensure RequireJS loads React first, then your component, without errors.

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