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”]
},
}

jmriyaz84

@suleiman_as , Do you have any fix on this font relative path issue , due to this issue I can proceed further .

suleiman_as

@jmriyaz84 Sorry I was away.
I would do it like this:

in quasar.conf.js
/ in build
/ in extendWebpack

extendWebpack(cfg){
(cfg.module.rules.find(_rule =>
            (_rule.test + "").includes("woff")
          ).use[0].options.name = "fonts/sub_path/[name].[contenthash:8].[ext]");
}

sorry again

jmriyaz84

@suleiman_as Thanks for your help , I will try and let you know.

jmriyaz84

@suleiman_as Today I have implemented your code which is creating all fonts under saqr folder which is good but the css file still referring the fonts into old path which is creating issue.
Fonts path is set as …/fonts/saqr/KFOkCnqEu92Fr1MmgVxIIzQ.a45108d3.woff instead of …/…/fonts/saqr/KFOkCnqEu92Fr1MmgVxIIzQ.a45108d3.woff. Can you please tell me how to adjust this font relative path according to our new folder structure.

Error Page

Font Path

File Structure

Code

If I remove below css configuration code everything is working fine.

chain
.plugin(“mini-css-extract”)
.tap(args => [{ filename: “css/saqr/[contenthash:8].css” }, …args]);

Please help how to fix this font relative path issue , we have to tell the css files to refer fonts in following way .
…/…/fonts/saqr/KFOkCnqEu92Fr1MmgVxIIzQ.a45108d3 which means it should add …/ as prefix on each font path , which says go back one more level.

Thanks for your time & effort for helping the Quasar Community.

suleiman_as

@jmriyaz84 change the publicPath for the fonts

extendWebpack(cfg) {
        cfg.module.rules.find(_rule =>
          (_rule.test + "").includes("woff")
        ).use[0].options.name = "fonts/sub_path/[name].[contenthash:8].[ext]";

        cfg.module.rules.find(_rule =>
          (_rule.test + "").includes("woff")
        ).use[0].options.publicPath = "../../";
},

Refactor it how ever you want

No More Posting New Topics!

How to use CopyWebPackPlugin in Quasar