vue-webpack | vue and webpack configration with ES6 postcss eslint | Code Analyzer library

I wanna have code coverage on frontend with cypress. Currently cypress recommends istanbul for coverage. Unfortunately I can't use it in pair of the stack below:

• vue-property-decorator
• cypress
• istanbul code coverage.
• typescript.

Because of: - I didn't find a way to make istanbul work with ts-loader, because istanbul-intementer-loader uses babel under the hood - babel-loader doesn't support decorators in the same way that typescript does, that breaks vue-property-decorator. Using vue in typescript w/o vue-property-decorator is not that neat...

Here're some useful link:

• example for repo with babel coverage
• official guide
• official github repo for typescript users
• cypress issue

Here's the repo and quick overview:

• git clone https://github.com/akoidan/vue-webpack-typescript && cd vue-webpack-typescript
• yarn install
• yarn run build
• yarn run e2e

You can also check out the babel branch on the repo above, to see example with babel instead of ts-loader

Here's the example of setup with ts-loader:

package.json:

I'm trying to create a simple web app with material-components-vue and vue-cli with webpack, however, I found out that I cannot import stylesheets from node_modules without a preceding ~.

I have tried several webpack/vue-cli configs, and ended up with a config in vue.config.js passing loader options.

My vue.config.js looks like this:

I've been stuck on this problem for days. I've tried everything I can find but still can't get it worked.

In app.js When I set like below, it works:

I use the dynamic source for vue-webpack images in nuxt :src="require('path/to/image' + dynamic.variable)" in my project navbar. If the users substitute their image through a form which refetches their information and deletes their previous image I get a webpack error module (img) not found (it does not find the new one): is there a way to solve this, like wait for webpack HRM to finish?

I tried setting up a setTimeout() of one second before user re-fetch and it works, but I don't like a random waiting, I'd use a promise or a sync dynamic, the point is webpack hot reload is not controlled by my functions.. I also tried with setting the dynamic path as a computed: but it doesn't fix.

My image tag:

I am working on webpack 4.29.3 and vue.js 2.6.3. I just tried to create a simple hello world project with vue js and webpack. I expected index.html to be rendered well. I get the error, though: SyntaxError: invalid range in character class which is really weird because I don't do anything with regular expression. that's why I am not sure which part to fix it.

vue-first.js:

I'm trying to follow https://alligator.io/vuejs/demistifying-vue-webpack/ . Based on this I tried:

I have the following code:

src/store/modules/outcome-analyzer/outcome-analyzer.js

I never really thought about it until I switched from webpack to brunch where I saw the following lines in index.html:

I'm trying to convert our entire build from requirejs and a mess to webpack, so I'll do my best to keep only the relevant details below.

The error, output in console from webpack