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?

javascriptwebpackwebpack-4

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify if the currentRoute begins with a specific text pattern (such as something/something/*...) in Angular

I need to prevent a loader from appearing on certain screens, so I used ngIf on routes where the loader is not necessary. Here's the code snippet from app.component.ts : <router-outlet> <app-spinner></app-spinner> <ngx-ui-load ...

javascriptangularangularjsangular-ng-if

The error "map is not a function" occurs when trying to update the

I've encountered an issue with my links rendering on a page. I wrote a function that toggles a specific property from false to true based on whether the link is active or not, triggered by a click event. Upon inspecting the updated set of links, I no ...

javascriptreactjs

What could be causing the Uncaught ReferenceError message that says scrollToM is not defined in my code?

Can someone help me with this code for creating a single page website? $(window).load(function() { function filterPath(string) { return string .replace(/^\//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') ...

javascriptjquery

Once a new element is inserted into the DOM, it no longer triggers the same functions as before

<script type="text/javascript"> $(function(){ $('button').each(function(i){ $(this).click(function(){ $(this).after('<br /><button type="button">Button</button>'); }); }); }); ...

javascriptjquery

The Chrome extension functions properly when the page is refreshed or loaded, but it does not work with internal navigation

When landing on a YouTube page starting with w*, I have a script that triggers an alert with the URL. However, this only works when entering the page directly or upon refreshing. I am trying to make the alert trigger when navigating internally to that page ...

javascriptgoogle-chrome-extension

Transmit information using the buttonRenderer feature in Ag-Grid for Angular applications

Struggling to transfer data between two unrelated components by clicking on a cell in ag-Grid and passing the data to a form component. I utilized the buttonRenderer function to extract row data from ag-Grid, but I'm unsure how to pass it to the secon ...

javascriptangulartypescriptag-grid

Increase the options available in the dropdown menu by adding more selected items, without removing any already selected

I came across this code on the internet http://jsfiddle.net/bvotcode/owhq5jat/ When I select a new item, the old item is replaced by the new item. How can I add more items without replacing them when I click "dropdown list"? Thank you <select id=&qu ...

javascripthtmlcssdrop-down-menu

When we modify the prototype of the parent object, where does the __proto__ point to?

Typically, when a new object is created using the "new" keyword, the __proto__ property of the newly created object points to the prototype property of the parent class. This can be verified with the following code: function myfunc(){}; myfunc.prototype.n ...

javascriptoopprototype

Verifying the emptiness of a PHP array using JavaScript

Hey there, I've got a form set up for users to input one or more books into a database. If a user forgets to enter the title when adding just one book, a JavaScript alert pops up reminding them to fill it in. However, if they have two or more books an ...

phpjavascriptarrays

Learn how to create a dynamic React.useState function that allows for an unlimited number of input types sourced from a content management system

Currently, I am exploring the possibility of dynamically creating checkbox fields in a form using DatoCMS and the repeater module. My idea is to generate multiple checkbox fields based on the input from a text field in Dato as a repeater, which can then be ...

javascriptreactjsgraphqlreact-hooks

Having trouble with downloading a node module?

I encountered an issue while trying to download the node-sass node module. The error message I received was as follows: To download the node-sass module, use the command: npm install --save-dev node-sass Error Binary has a problem: Error: \?\C: ...

javascriptnode.jsnpmnode-modules

I am experiencing challenges with utilizing the fetch() function and am unable to retrieve the data

I'm currently struggling with integrating Google's reCaptchaV3 into my website, particularly when using the fetch() function. Here is the code snippet I have developed so far: function sendData(name, email, captcha) { const info = JSON.stri ...

javascriptjsonfetchrecaptchacaptcha

"Creating a Typescript array by extracting items from a different const array (as seen in the official beginner tutorial

Currently, I am working through the Angular tutorial that can be found at https://angular.io/start. After successfully completing the tutorial, I decided to practice building for production locally. However, when attempting to build, I encountered this err ...

javascriptangulartypescript

What is the best way to keep a header row in place while scrolling?

I am looking to keep the "top" row of the header fixed or stuck during page scrolling, while excluding the middle and bottom rows. I have already created a separate class for the top row in my header code: view image description ...

javascripthtmlcsswordpressheader

Create a function that will repeatedly call itself at specified intervals, increment a variable, and update the class values of elements with an id matching the current value of the

I'm attempting to create a setup that cycles through different images <div id="img_box" class="shadow" onload="imgCycle(1)";> <img id="1" class='opaque imgbox selected' src="media/img ...

javascriptcss

Guide to retrieving RabbitMQ queue messages in Vue.js application

I am currently working on a project using Spring Boot to publish messages to RabbitMQ and then push them to a queue. I also have a Vue.js frontend application that needs to consume these messages from the RabbitMQ queue. Despite searching online, I haven ...

javascriptvue.jsrabbitmqreceiverreal-time-data

Having difficulty identifying the same element during testing

Here is the code snippet I'm working with, which checks for expected text: console.log(typeof browser.getText('.modal.modal--primary.pin-container h1')); expect(browser.getText('.modal.modal--primary.pin-container h1')).toContain( ...

javascriptseleniumwebdriver-io

Converting date formats in HTML with the help of JavaScript

I am completely new to JavaScript and would greatly appreciate any assistance. Within my HTML code, I have dates extracted from a form that need to be displayed. <body> Test Date<br> <span id="test">{{TestDate|"dd/MM/yy"}}</span> ...

javascripthtmldateformat

Ensure that Google Tag Manager (GTM) delays the pageview until the SPA URL title is available

I'm dealing with a React SPA that manages all the URL titles on the frontend, so the historyChange event registered on GTM captures the visited URLs along with their titles correctly. However, I've noticed that on the initial load of the SPA, su ...

javascriptreactjsgoogle-analyticssingle-page-applicationgoogle-tag-manager

What is the best way to create separate positions for items within a single div?

https://i.sstatic.net/FQRY4.jpgAfter looping through various names and accessing them from a single div using {{item}}, I encountered an issue. All the names are within one parent element. This is the code snippet: <div :style="image" cl ...

javascripthtmlcssvue.jsflexbox