The Vue-cli webpack development server refuses to overlook certain selected files

I am attempting to exclude all *.html files so that the webpack devserver does not reload when those files change.

Here is what my configuration looks like:

const path = require('path');

module.exports = {
    pages:
    {
        index: 
        {
            entry: 'src/main.js',
            template: 'public/Index.html'
        }
    },
    outputDir: "wwwroot",
    filenameHashing: true,
    configureWebpack: 
    {
        devServer: {
            static: {
                directory: path.join(__dirname, 'public'),
                watch: 
                {
                    ignored: '*.html',
                    usePolling: false,
                }
            },
        },
        watchOptions: 
        {
            aggregateTimeout: 3000,
            ignored: /.*\.html/
        }
    }
}

I am using @vue/cli-service: 5.0.4 which utilizes webpack 5. However, it is not working as expected - when I change an html file, webpack dev-server still reloads the page. How can I make it work so that changing html pages will not trigger a reload?

Answer №1

Use a regex expression instead of a string in devServer.static.watch.ignored

ignored: /.*\.html/

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

Retrieving information from an Object within a JSON response

After calling my JSON, I receive a specific set of arrays of objects that contain valuable data. I am currently struggling to access this data and display it in a dropdown menu. When I log the response in the console, it appears as shown in this image: htt ...

Connecting NGINX to a Node.js cluster with proxy_pass

After setting up both a NGINX server and a node.js process, the node.js code structure is as follows: function initiateCluster() { var numCPUs = require('os').cpus().length; if (cluster.isMaster) { // Fork workers. for (var i = 0; i ...

Explore one of the elements within a tuple

Can we simplify mapping a tuple element in TypeScript? I'm seeking an elegant way to abstract the following task const arr: [string, string][] = [['a', 'b'], ['c', 'd'], ['e', 'f']] const f ...

I can't figure out why this form isn't triggering the JS function. I'm attempting to create an autocomplete form field that connects to a MySQL database using a PHP script and AJAX

I am encountering an issue while trying to implement the .autocomplete() function from jQuery UI with a list of usernames fetched from a MySQL database using a PHP script. Strangely, it is not functioning as expected and no errors are being displayed in th ...

What is the best way to establish a global constant that can be accessed by multiple controllers in AngularJS?

Imagine I need to create a constant variable that can be shared between controllers in Angularjs; $webroot = "localhost/webroot/app" After some research, it appears that services are the recommended approach. But which one should I use? Should I implemen ...

Avoid the problem of animations triggering twice when clicking

Hey there, I am facing an issue with my slider. If you could take a look at this website , you will notice that after clicking on the arrows, the slider behaves asynchronously. It changes speed rapidly at times and then slows down, repeating this pattern ...

Create PDFs using PhantomJS when the HTML content is fully loaded and ready

I am a newcomer to utilizing phantomjs and encountering difficulties in rendering my website as a PDF file. Although I can successfully render a simple version of the page, issues arise when multiple images and web fonts are involved, causing the DOM not t ...

Can Javascript be used to obtain someone's UDID?

Is it feasible to retrieve individuals' UDIDs when they visit your website? If this is achievable, could you recommend a helpful tutorial for me to follow? ...

JS: Initiating a new keypress operation

When I press the Tab key, I want it to do something different instead of its default action. Specifically, I have a text box selected and I would like it to add spaces (essentially making the textarea behave like a text editor). How can I trigger this type ...

How can I resize an element using jQuery resizable and then revert it back to its original size with a button click?

I need help figuring out how to revert an element back to its original size after it has been modified with .resizable. I attempted the following: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//code. ...

Capture the selected hyperlink and show the corresponding page title in a designated box for reference

I want to track the links that users click on and display them in a box with an image and name of the page. Additionally, I would like to show how long the user spent on each page below the image. The images in the box should also be clickable links to the ...

Tips for increasing the size of a textarea

I'm attempting to extend a textarea by adjusting the margin-top property, but it doesn't seem to be working as intended. Here is the code snippet in question: #sqlcontainerLoggedInPage2 { margin-top: 60px; } <div class="container-fluid" i ...

Instructions on how to delete a specific tag from a table using its ID

I have a complex HTML table generated by a PHP loop with multiple rows. My goal is to eliminate all the a tags within the td tag where the ID of the td tag is equal to 1 or another specified value. <table> <tr> <td>ID: 1</ ...

How to play audio with a source path that includes the special character "%" in JavaScript

Having an issue with playing an audio file that has '%' in its name. I've tried using the tag <audio src="test%320.mp3" controls></audio>, but it seems like the file is not being found when I try to play it. Can anyone ...

Certain sections within a Formik form are failing to update as intended

I have successfully implemented a custom TextField wrapper for Material-UI fields, but I am facing an issue with native Material UI fields not updating the form data upon submission. Below is the relevant code snippet along with a link to a code sandbox d ...

Implementing Google Calendar access token in JavaScript: A practical guide

I have a question about Google Calendar and I'm hoping you can assist me. I currently have an access_token from Google Calendar that has been stored in the localStorage. const googleAccessToken = e.vc.access_token; localStorage.s ...

Eradicating Pinpointers on Navigation Tool (Google Maps)

I have a feature that utilizes an ajax request to generate a marker or multiple markers when the user interacts with the map. Once a marker is created at a specific location by the user, I then set up a click event on the marker itself. The issue arises w ...

Is there a way to display the overall count of items in ReCharts?

I'm curious about how to access the additional data items within the 'payload' field of recharts when using material-ui. Despite my efforts to find relevant sources, I have not come across any references pertaining to accessing other group n ...

The res.download() function is not functioning properly when called from within a function, yet it works perfectly when directly called through the API in a browser

I have a button that, when clicked, triggers the downloadFile function which contacts the backend to download a file. async downloadFile(name) { await this.$axios.$get(process.env.API_LINK + '/api/files/' + name) }, app.get('/api/files/ ...

Locate the database user based on any parameter provided in the request

I need to search for users in the database using any of three different fields. In Postman, I have set up the following paths: http://localhost:8082/api/users/617473029f80eda3643a7fdd http://localhost:8082/api/users/Michael http://localhost:8082/api/use ...