webpack-build | Wraps webpack and plays well with build systems | Build Tool library

I am working on a SPA application built using vue.js 2.6, bootstrap-vue 2.8, sass 1.34 (dart-sass) as preprocessor and sass-loader 10.2.

With the time the project is getting quite big and we've switched from Node-Sass to Dart-Sass (as node-sass is deprecated).

Unfortunately, we're now getting performance issues when building or developping on the project, as it now takes approximately 15 minutes to create a new built, and we're often encountering high memory usage in development.

After reading this article, I figure out using the speed-measure-webpack-plugin that 95% of the compilation time is due to css compilation purposes as most of the SMP stacktrace contains such several entries:

I'm following closely to this feature (https://nuxtjs.org/blog/nuxt-static-improvements/#generate-time-cache-vs-full-webpack-build)

I may be getting this wrong, but I hope to clarify if I can use this feature correctly.

Basically, I want to skip the webpack build as highlighted in the article, and build my pages through nuxt generate. The thing is that my data source usually changes, but my site code does not, and I thought using the nuxt generate in Nuxt 2.14 would be helpful for my use case in skipping the webpack build.

However, on running the nuxt generate command which skips the webpack build and jump straights to the generating of pages, the pages generated seem to be updated (as expected), but the data inside asyncData does not seem to be getting updated/refreshed.

nuxt.config.js

I have a legacy project which takes a lot of time to build. We are using HMR in development mode. However, I always have to toggle between the screens to check if the build is complete. I am using Iterm2 with ZSH and have tried bgnotify plugin for background notifications for long-running commands, it is great but it does not work for HMR. I also tried webpack plugin webpack-build-notifier but it also does not work for HMR. Can someone suggest a way to get system notifications on every HMR build?

My current configuration is as follows:

I got scss modules working for my dev environment but when I deploy to production, my styling is not compiled/applied. How can I configure webpack so that my dev and production environment will be consistent? I know the webpack files are very messy but if someone can point out what I'm doing wrong, I would really appreciate it.

webpack.base.js

I came back to my Webpack 4 configuration and all the packages after 4 months. It always surprises me how fast a package get's updated or deprecated.

I have this problem, that I used to include the @babel/polyfill directly to the Webpack's entry => src together with my other JS and SASS source.

This is my current .babelrc file:

When running webpack I am getting the following:

The exported multiple entry compiled js files in my multi entry point final bundle built with production mode in webpack always include loaders content. How to eliminate them and why they are included?

To reproduce

I have a Laravel project and as you know when you deploy your app everything in your public directory should be copied over to your htdocs or public_html directory to hide your application's code.

I am using webpack to build my react code and everything else and each time I change my javascript webpack does what I want, it sees I make a change and then it builds it. However I want to add one additional command after it builds and that is to copy everything from the public directory into the correct directory in htdocs/public_html.

So far I read up on this question here Run command after webpack build

It works and I can get the echo to work but I'm not sure why cp isn't working. Echo works but how do I know what shell commands I can use? I tried 'cp' and even 'copy-item' which is powershell, but none are working.

This is my plugin so far, I figured I needed to change the directory to be safe before copying anything over but again, nothing is working.