How to use CopyWebPackPlugin in Quasar

[jmriyaz84]

Dear Friends ,
After qusar build , I want all my js files should go under /dist/spa/js/myprojectname/ folder , can you please tell me how I can achieve this through copywebpackplugin in quasar.

Currently it is getting copied under /dist/spa/js/ folder .

[dobbel]

@jmriyaz84 said in How to use CopyWebPackPlugin in Quasar:

Currently it is getting copied under /dist/spa/js/ folder .

Depending on what version Quasar you are using, why not just put those js files in:
public/js/myprojectname

https://quasar.dev/quasar-cli/handling-assets#Introduction

[jmriyaz84]

@dobbel , Thanks for you response . Currently I am using quasar 1.1.3 .

Actually My main project runs on tomcat , so I am creating sub module for that project by using quasar framework , after quasar build I have to copy manually all my js & css file into that main project which already has js & css folder , so to differentiate my quasar files I want to keep all my minified files into dedicated js & css folders like js/myprojectname/vendor.js . so that I can easily replace entire folder instead of each & every file.

I hope you understood my concern .

To summarize all my minified files should go under dist/spa/js/myprojectname/<<files.js>> & dist/spa/css/myprojectname/<<files.css>> instead of dist/spa/js/<<files.js>>

[suleiman_as]

Have you tried to change it in chainWebpack with output.filename & chunkFilename & mini-css-extract filename.
it should work

[jmriyaz84]

@suleiman_as Thanks for your help , it would be great if you provide any sample code

[suleiman_as]

@jmriyaz84

sure, you could do it like this:

in quasar.conf.js

module.exports = function(ctx) {
  return {
    ...
    build: {
      ...
      chainWebpack(chain) {
        ...
        if (ctx.prod) {
          ...
          chain.output.filename("js/myprojectname/[contenthash:8].js").chunkFilename("js/myprojectname/[contenthash:8].js");
          chain.plugin("mini-css-extract").tap(args => [{ filename: "css/myprojectname/[contenthash:8].css" }, ...args]);
          ...
        }
        ...
      }
      ...
    }
    ...
  }
}

the path & the naming and the hashing it’s up to you and it should work.

[Stanley]

Actually I have the same requirement and I also did it manually as the author did. (copy all the files under folder \dist\spa, go to the target folder, delete all files, then paste the files).
I just check the build log. as you can see

App · Reading quasar.conf.js
 App · Transpiling JS (Babel active)
 App · Extending SPA Webpack config
 App · Cleaned build artifact: "C:\Work\myquasarproject\dist\spa"
 App · Generating Webpack entry point
 App · Compiling with Webpack...

I am not sure where to change the build artifact path.

[suleiman_as]

@stanley
if you mean that you want to change the build dist path, you can add distDir property in the build config.

in quasar.conf.js

module.exports = function(ctx) {
  return {
    ...
    build: {
      ...
      distDir: "./path/to/target/folder/relative/to/quasar.conf.js",
      ...
    }
    ...
  }
}

[Stanley]

@suleiman_as It’s great, it works, thank you very much! Now I search the key word “distDir” in quasar, I can find the documentation.

[suleiman_as]

@stanley Glad

[jmriyaz84]

@suleiman_as Great Thanks for your help , it is working ,all js & css files are getting generated on correct path , but still fonts are referring old relative path , can you please tell me how to correct font path also.

Configuration Code

Font Issue

[jmriyaz84]

@suleiman_as Can you please help me to fix this Material IO Font’s relative path issue , it should be like …/…/fonts/kF…woff instead of …/fonts/kF…woff
where I can configure the path for font

[suleiman_as]

@jmriyaz84 Hello, Is it your own fonts or quasar’s?

[jmriyaz84]

@suleiman_as Quasar’s inbuild material io font

[jmriyaz84]

quasar.conf.js

module.exports = function(/* ctx */) {
return {
…
extras: [
“roboto-font”, // optional, you are not bound to it
“material-icons” // optional, you are not bound to it
],
…
build:{
framework: {
iconSet: “material-icons”, // Quasar icon set
lang: “en-us”, // Quasar language pack
config: {},
components: [“QInput”],
importStrategy: “auto”,
// Quasar plugins
plugins: [“AppFullscreen”, “Loading”, “Dialog”, “Notify”]
},
}