Is there a way to customize the Webpack output to incorporate specific options solely for a particular bundle?

Question

Is there a way to customize the Webpack output to incorporate specific options solely for a particular bundle?

Currently, I am using Webpack 4 to build multiple bundles. My requirement is to add the output options libraryTarget and library for a single bundle only.

The default configuration looks like this:

output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: '[name].[chunkhash].js',
  },

But for a specific bundle, I need the following settings:

output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: '[name].[chunkhash].js',
    libraryTarget: 'var',
    library: '[name]'
  },

I can't find any examples in the documentation. Is it possible to achieve this?

javascript webpack webpack-4

Answer 1

Answer №1

While the task you're requesting cannot be directly accomplished, a workaround is available by treating your current configuration as a base and then expanding upon it in a separate file using webpack-merge:

// For instance, consider creating webpack.config.your-lib.js
module.exports = merge(require('./webpack.config.common.js'), {
  // ...adjustments to entry point...
  output: {
    libraryTarget: 'var',
    library: '[name]',
  }
})

Remember to modify the entry section accordingly in order for the new configuration to only generate the desired library packages.

Answer 2

While the task you're requesting cannot be directly accomplished, a workaround is available by treating your current configuration as a base and then expanding upon it in a separate file using webpack-merge:

// For instance, consider creating webpack.config.your-lib.js
module.exports = merge(require('./webpack.config.common.js'), {
  // ...adjustments to entry point...
  output: {
    libraryTarget: 'var',
    library: '[name]',
  }
})

Remember to modify the entry section accordingly in order for the new configuration to only generate the desired library packages.

Is there a way to customize the Webpack output to incorporate specific options solely for a particular bundle?

Answer №1

Similar questions

Interactive Div that Adapts

The JSON file containing API data is stored within the _next folder, making it easily accessible to anyone without the need for security measures or a login in the Next

Most efficient method to upload numerous images without any lag

Warning: MaxListenersExceededNotification may occur during the installation or creation of Node.js projects on macOS

Get the characters from a URL following a specific character until another specific character

Converting an npm module to work with Next.js

Having trouble establishing a connection between the client and server while using Node.js with socket.io, Express, and an HTML file

Experiment with the Users.Get function available in vk-io

The bidirectional data binding feature is malfunctioning following an XMLHttpRequest request

PHP is capable of showing echo statements from the function, however it does not directly showcase database information

Accept only numerical values, addition and subtraction symbols, commas, the F5 key, and various other characters

Using Laravel and vue.js to convert values into an array

Using React Material UI icon within an auto complete feature

Creating a Dynamic Dependent Dropdown with Jquery and Ajax in PHP

Using Angular's ng-repeat prefilter with JavaScript

The 'data' variable is not defined in the React custom hook Pagination

Guide on extracting a JavaScript string from a URL using Django

What is the reason for webpack adding "-es5" and "es2015" to my TypeScript files?

The Jqueryui image link is not displaying the image despite no error being reported

Mastering Puppeteer: Tips for Successfully Submitting Forms