devserver | simple HTTPS server for local development | HTTP library

I already know that this problem has been asked many times. I looked over all the questions, but it doesn't work. I converted typescript to javascript, everything is going very well until I get to implement css. After importing my css, I get this error.

I'm trying to access my web application served using the webpack DevServer from a virtual machine, but I'm able to connect through HTTPS only to the main URL - all sub-URLs fail with ERR_SSL_PROTOCOL_ERROR error.

I'm running webpack DevServer on a host machine with macOS. My virtual machine is running Windows 10 (VMware Fusion in bridged network mode). Webpack DevServer uses custom self-signed SSL certificates (generated using the mkcert tool).

Here is my DevServer configuration (@angular-builders/custom-webpack:dev-server):

I was trying to dockerize my existing simple vue app , following on this tutorial from vue webpage https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html. I successfully created the image and the container. My problem is that when I edit my code like "hello world" in App.vue it will not automatically update or what they called this hot reload ? or should I migrate to the latest Vue so that it will work ?

docker run -it --name=mynicevue -p 8080:8080 mynicevue/app

I know this sounds ridiculous, but yes, I don't know how to import an img using webpack 5. What I want to do is just import an img which is located in the project folder and I want to import it into one of my react functional component and then to draw it on the component.

My current webpack.config.js is as follow:

If I generate production js bundle in my next.js project, it's not minified.

For example white characters are not removed.

package.json

Good morning,

I am having an issue when working with React router dom using my own webpack configuracion. I know using create-react-app will solve (almost) any issues and is friendly to use, but we would like to have more flexibility.

This is my main application:

I am using .Net Core 3.1 with React, Typescript and webpack for an SPA. I have multiple modules in react which I load on different page/view of Asp.Net core application.

I am facing issue with auto refresh or hot reload. When I change a parameter which I am passing from module to a component hot reload works as expected BUT if I do any change in component then those are not getting reflected in browser.

If I browse https://localhost:5010/webpack-dev-server I can see home.bundle.js there. Also if change value of "msg" param/prop of HomeComponent in HomeModule.tsx, I can see new bundle generated for home.bundle.js with fresh hashcode and change also reflects to browser on https://localhost:5010/home/ BUT If I do change to HomeComponent.tsx ex: if I change "Home component" to "Home component 123" this change not getting reflected neither on https://localhost:5010/home nor the new bundle NOT generating on https://localhost:5010/webpack-dev-server.

Here is my project structure and files including configuration files. Any help will be highly appreciated.

Update: I added HotModuleReplacementPlugin to webpack.dev.config.js and now when I modify something in component HomeComponent.tsx I see a new entry in https://localhost:5010/webpack-dev-server something like "5f80de77a97d48407bd9.hot-update.json". If I open this file it's content is like {"h":"0dce1f9e44bff4d47fb4","c":{}}

Apart from this another issue is when I run application with F5 from Visual Studio it takes couple of seconds to load website until than browser shows "This site can't be reached"

Project stucture

I trying to build project using Lerna and its hoist feature. Everything worked great, before i decided to move ui components from site to packages, for reuse purposes.

I have file structure like this

so I'm creating a ReactJS app and configuring webpack for it. below's my webpack config:

webpack.config.js