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

Tips for incorporating PHP $_SESSION data into a JavaScript file

What I've been doing is using $_SESSION['siteRoot'] to store the root address of my website (since it's part of a framework and can vary depending on how the site is accessed). The challenge now is incorporating this value into some of ...

directive does not execute when the <Enter> key is pressed

I recently came across a helpful post on Stack Overflow about creating an Enter keypress directive. After following the instructions, here is my JavaScript code that replicates the functionality: JavaScript var app = angular.module('myApp', [] ...

Nested loops combined with a timeout occasionally results in failure

I encountered a problem with the loops and timeouts in my script that I created for practice. If you want to take a look at the script, you can find it here: http://codepen.io/JulienBarreira/pen/EWNoxJ When running the script, I noticed that sometimes one ...

Encounter a 400 status code error while utilizing AZURE ML with nodejs

I encountered an issue while attempting to consume the web service, receiving the error message: The request failed with status code: 400 {"error": {"code":"BadArgument","message":"Invalid argument provided.", "details":[{"code":"BatchJobInputsNotSpecif ...

Simple method for implementing a fade effect on a React component with raw JavaScript techniques?

I am seeking a way to have my React component smoothly fade in upon being mounted. The component's outermost DIV starts with inline style display:none. Within the componentDidMount() method, I've written the following code: let el = document.que ...

The React page loads before verifying the clients' permissions

In my application, I am using a Javascript query to fetch the data of the current user. This data is then used to verify the user's access permissions for different pages in my React app with the help of Apollo Client and GraphQL. Unfortunately, ther ...

Issues with the execution of Jquery function

Hey guys, take a look at my code: //Additional Jquery codes // display_popup_crop : revealing the crop popup function display_popup_crop(link) { alert("show_popup_crop function is triggered!"); // changing the photo source $('#cropbox&a ...

In my Vue watch method, I have two parameters specified, and one of them remains constant without any changes

Currently, I am attempting to access a method within my watch function with two parameters. Here is the code snippet for the method: onBoolianChange(value, willChange) { willChange = (value === false) ? true : false; }, watch: { "e ...

The function Getter is expected, but an error has occurred with "getters.doubleCounter" returning a value of 20 in VUEX

Currently, I am diving into the world of Vuex and encountering some challenges along the way. In my attempt to create a getter on my vuex instance, I am facing an error when trying to display data from one of my components: The getter should be a functi ...

Utilizing Laravel's Gate and Authorization features within VueJs

I've come across an interesting challenge that I haven't seen addressed before - how can I implement VueJs authorization actions in Vue templates? When working with Laravel's blade, handling this task is quite straightforward using the @can ...

Can someone explain the process by which Vue is autonomously inserting properties into my q-input component that I designed?

Currently, I am using Vue 3.2.4, Vuex 4.0.1, and Quasar 3.1.0 in my project setup. One interesting aspect of my project is a custom Vue component that I have recently developed. Here's a snippet of the code: <template> <q-input outlined v- ...

An issue with the Babel version is preventing the Express API from starting up successfully

Error! Message: [nodemon] starting `babel-node index.js` C:\Users\Zara Gunner\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-ma ...

The scoping of CSS in Vue becomes ineffective when the ExtractTextPlugin is utilized

Here is an example of Vue code that works perfectly in development: <template lang="pug"> .wrapper </template> <style lang="stylus" scoped> .wrapper min-height: 100vh display: flex justify-content: center align-items ...

Enhance the visibility of the google.maps marker by zooming in

I am having trouble properly zooming to a specific marker. When trying to change the view to a designated marker, I am unable to achieve it successfully. I have attempted: map.setCenter(location); map.setZoom(20); as well as map.fitBounds(new google.m ...

JS problem with using for and foreach loops in Node.js

I've been really stumped by this situation. Everything was running smoothly until 4 days ago when two of my cron daemon jobs suddenly stopped working. Instead of ignoring the issue, I decided to take the opportunity to rebuild and enhance the code. I ...

Examining the execution of a function/method when a click event occurs within a functional component

It took me a while to realize that testing functional components with vue-test-utils can present some challenges In my case, I am utilizing Bootstrap-Vue's B-Button with a @click event that calls a function/method. When I attempt to test whether the ...

How to Make Bootstrap 3 Collapse Panels Stand Out with an Active Class

First of all, here is the fiddle link: http://jsfiddle.net/krish7878/h38jn324 I have a simple question. When a panel is clicked and it expands to show its contents, a class 'active' should be added to 'panel-heading'. I came across a ...

What could be the reason for Bootstrap not functioning on the homepage of my Laravel website?

My Laravel Journey As a newcomer to Laravel, I decided to dive in and learn by following tutorials on YouTube. The first step was uploading my project to a domain to test database connections using MySQL instead of SQLite as shown in the tutorial. Although ...

AngularJS dropdown not reflecting changes when using ng-selected

While working with AngularJS, I have encountered an issue where the first child of the select element remains empty despite my efforts to populate it. Below is the HTML code snippet: <select id="connectTV" aria-label="How many Dish TVs" ng-model="conn ...

Encountering an error when attempting to run npm start following the creation of a React app

Whenever I set up a new React application and attempt to run it, an error always pops up: It seems like there might be an issue with the project dependency tree. This is likely not a bug within Create React App itself, but rather something that needs fixi ...