Is it possible to merge JavaScript files exclusively using encore?

I am working on a Symfony project with a Twitter Bootstrap template where the assets are hardcoded in Twig. I would like to use Encore to manage assets, but I want it to only combine JavaScript files without compiling them further.

Is there a way to configure Encore to just combine JS files?

To install Encore, you can follow the steps outlined here: https://symfony.com/doc/current/frontend/encore/installation.html

...and here's my idea for the app.js file:

include '1-file.js'; // alert(1);
include '2-file.js'; // alert(2);

And the desired output in Twig:

merged.js // alert(1); alert(2);

Thank you in advance for any advice.

javascriptsymfonynpmwebpack-encore

Answer №1

I have been utilizing encore for several months now. When you execute the command yarn build or npm run build, encore will minimize those files automatically. Inside the webpack.config.js file, there is an option called enableSingleRuntimeChunk(). This particular option informs the system that, if a large file is being processed, encore should divide it into two smaller chunks to optimize the overall performance. If you wish to disable this feature, simply delete the line and replace it with .disableSingleRuntimeChunk().

Remember to rerun encore after making these changes to ensure they take effect!

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

Why do my paths encounter issues when I alter the manner in which I deliver my index.html file?

I recently made a decision to change the method of serving my index.html file from app.use('/', express.static(__dirname + '/..')); to app.get('/', function(req, res) { res.sendFile(path.join(__dirname + '/../index.htm ...

javascripthtmlexpressget

Include text into the iframe attributes

In my project, I am dynamically loading content into an iframe based on the results of a SQL query that is influenced by user input. This requires the height of the iframe to be adjusted regularly to maintain consistent page layout. Initially, when the pa ...

javascript

What is the process for updating the h1 header with text entered into an input field?

I'm working on an assignment that requires me to change the h1 heading to reflect whatever is entered into the input field. To accomplish this, I need to create a function using getElementByID. Here's what I've done so far: <!DOCTYPE htm ...

javascripthtmlinputgetelementbyid

Display the accurate duration based on the dates selected in an HTML form automatically

If someone has office hours on Monday, Wednesday, and Friday from 7:00 am to 7:00 pm, and on Tuesday and Thursday from 10:00 am to 9:00 pm, the dropdown menu should display only the timings of 7:00 AM to 7:00 PM if the selected date is a Monday, Wednesda ...

javascriptjqueryhtml

Is it possible to upload an image file while the element is hidden with "display: none" property?

I need to upload a file using Selenium webdriver. Here is the URL of the page. <div class="async-upload__thumb item-image__area"> <div class="fab-dialog__thumb-drop-zone async-upload__thumb-drop-zone"> <p class="async-upload__thumb-ms ...

javascriptjavaselenium

Issue with setting and showing the PHP data array within the vue.js variable

I am encountering an issue with transferring an array of data from a PHP session variable to a Vue.js variable Here is how I am trying to assign an array of data to a Vue.js variable: permissions:['<?php echo json_encode($_SESSION['permission ...

javascriptphpvue.js

Preserve the values of checkboxes throughout the entire website by utilizing localStorage

Example A functionality in the example allows users to add images to a container by clicking on checkboxes. However, there is an issue where when a checkbox is checked on one page to store an image, and then another checkbox is checked on a different page ...

javascriptjqueryhtmllocal-storage

The "begin" parameter of the Angular limitTo filter appears to be ineffective in Angular version 1.3

Currently, I am attempting to implement a pagination feature on an array of users using Angularjs 1.3. ng-repeat="user in users | filter: searchText | orderBy: 'lastName' | limitTo:pageSize:startPosition track by user.lanId" I specifically want ...

javascriptangularjsangularjs-filter

Having trouble installing gifsicle behind a corporate proxy on a Windows system? Installation is failing or getting stuck

windows 7, [email protected], [email protected] npm and git have been configured to work with the corporate proxy. It was a bit of a challenge to set up git and npm to utilize the corporate proxy, but it was successfully accomplished. Here is wh ...

node.jsnpmgifsicle

What is the best way to save the response data into an array outside of the current function in Node.js?

How can I efficiently store all the result data into an array called pImages? I am able to retrieve the results, but I believe using an async function would be more suitable. However, I am unsure of how to implement it. Any assistance would be greatly appr ...

javascriptnode.jsexpressimagekit

"JavaScript encountered an Uncaught TypeError: Cannot read property 'style' of undefined

Looking to create a local time clock using HTML, here is the code: <body> <div class="container text-center"> <div class="row"> <div class="col-xs-12 col-sm-6"> & ...

javascript

Encountering Laravel npm installation warnings with npm showing deprecated graceful-fs notifications

As a newcomer to Laravel, I could use some guidance. Currently, I am working through Laracasts training on managing css and js. Upon attempting to run npm install, I encountered warnings such as: npm WARN install Couldn't install optional dependency ...

phpnode.jslaravel-5npm

The program encountered an error trying to access the 'version' property of a null value

Just starting my journey with Power BI and looking to customize the visual controls by creating a custom Date slicer using my own Calendar. Followed this tutorial to create a new project, but encountered an error. Although some articles suggested that the ...

npmpowerbinpm-startpbiviz

Incorporating a basic search feature into Ajax

At the moment, only results appear when you modify the query. I want to modify this to allow user input. I have set up the fields, but I need help adjusting my ajax code to accept the new search criteria which is crucial for functionality. This is what m ...

javascriptjqueryajaxjsonsearch

Exploring the functionality of window.matchmedia in React while incorporating Typescript

Recently, I have been working on implementing a dark mode toggle switch in React Typescript. In the past, I successfully built one using plain JavaScript along with useState and window.matchmedia('(prefers-color-scheme dark)').matches. However, w ...

javascriptreactjstypescriptnext.js

Choose a particular optgroup simultaneously using custom JavaScript

Check out this Fiddle for an example I am facing a situation where I have two different types of option groups with options. My challenge is to ensure validation between these two groups. How can I achieve this? Situation 1 If I select something from g ...

javascriptjquery

Is it possible to utilize AND (&&) OR ( || ) operators within the dependency array of React JS?

Is it possible to include the && and/or || operators in the dependency array like this: const isVisible = true const isModified = false useEffect(() => console.log("both are true"), [isVisible && isModified]) Some may consider this to ...

javascriptreactjs

The interval keeps resetting every time I want the initial one to expire first

I'm currently working on a battle system that utilizes intervals, and I've encountered an issue where it keeps refreshing instead of creating multiple intervals. When I stop pressing the button associated with it, everything goes back to normal. ...

javascriptnode.jssocket.io

Encountering a problem when making a HTTPS GET request to a REST API using

I am currently running an Angular application that utilizes an external API to fetch country ISOs. However, I am encountering an error with the API since it uses HTTPS. Interestingly, when I implement a proxy in my Angular local environment by mapping /is ...

javascriptangularhttpshttp-headers

The onClick function is called when I fail to click the button within a React form

I set up a form and I would like to have 2 ways to submit it: One by filling out the input field and pressing enter One by recording voice (using the react-speech-recognition library) However, after adding the second way, the input fi ...

javascriptreactjs