Combining external resources for shared use among various modules with webpack

Question

Combining external resources for shared use among various modules with webpack

Currently, I am developing modules to be integrated into a project. These modules share common dependencies, resulting in the duplication of packaged dependencies within the bundle when using webpack. To resolve this issue, I have identified and set these dependencies as external.

For example:

external: {
    'react':'react',
    'react-dom':'react-dom'
}

However, I am currently faced with the challenge of consolidating these dependencies into a single common JS file that can be utilized across all modules.

javascript npm webpack

Answer 1

Answer №1

Here is how you should configure externals in your webpack setup:

// Make sure to exclude React from the bundle, include only react and react-dom
externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react',
    umd: 'react',
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom',
    umd: 'react-dom',
  },
},

You can then use these external libraries in your main application.

If this doesn't match your situation, it would be helpful to have more details.

Answer 2

Here is how you should configure externals in your webpack setup:

// Make sure to exclude React from the bundle, include only react and react-dom
externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react',
    umd: 'react',
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom',
    umd: 'react-dom',
  },
},

You can then use these external libraries in your main application.

If this doesn't match your situation, it would be helpful to have more details.

Combining external resources for shared use among various modules with webpack

Answer №1

Similar questions

Finding the count of childNodes within a div using Selenium

Updating state: Removing a specific individual from an array of objects when a button is clicked

Having difficulties retrieving footer Fields using cheerio library

Redux actions do not cooperate with functions, preferring to be implemented inline instead

Applying Media Queries Based on Element Height

Excessive data flooding the console through Socket.io until the Payload reaches an unsustainable size

Having challenges retrieving information from MySQL in AngularJS

Experimenting with Extjs compatibility using Selenium

Use PhpStorm and node-watch to monitor changes, compile files, and deploy them to the server effortlessly

Use the loopback repository from one controller in a different controller

Exploring the capabilities of Jasmine 2.0 by testing an AngularJS factory method that returns a promise

Display a pop-up message following the successful addition of an item to the cart across

Is the file corrupt using node.js?

What's the issue with reducers receiving a Function instead of an Object in Redux?

Executing a background.js function in response to an event trigger within the active tab in a Chrome extension

What is the best method to retrieve information from a nested JSON array?

Node.js require function not functioning as anticipated

Filtering content using a checkbox

angular-chart custom tooltip positioning issue

Navigating between pages in a multi-page setup using vue.js: A comprehensive guide