Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to use CopyWebPackPlugin in Quasar

    Framework
    4
    15
    65
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jmriyaz84 last edited by 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 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @jmriyaz84 last edited by

        @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

        1 Reply Last reply Reply Quote 0
        • J
          jmriyaz84 last edited by 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>>

          1 Reply Last reply Reply Quote 0
          • S
            suleiman_as last edited by

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

            1 Reply Last reply Reply Quote 0
            • J
              jmriyaz84 last edited by jmriyaz84

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

              S 1 Reply Last reply Reply Quote 0
              • S
                suleiman_as @jmriyaz84 last edited by 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.

                1 Reply Last reply Reply Quote 0
                • S
                  Stanley last edited by 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.

                  S 1 Reply Last reply Reply Quote 0
                  • S
                    suleiman_as @Stanley last edited by

                    @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",
                          ...
                        }
                        ...
                      }
                    }
                    
                    S 1 Reply Last reply Reply Quote 1
                    • S
                      Stanley @suleiman_as last edited by

                      @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.

                      S 1 Reply Last reply Reply Quote 0
                      • S
                        suleiman_as @Stanley last edited by

                        @stanley Glad 🙂

                        1 Reply Last reply Reply Quote 0
                        • J
                          jmriyaz84 last edited by 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 configuration.PNG

                          Font Issue
                          font-issue.PNG

                          1 Reply Last reply Reply Quote 0
                          • J
                            jmriyaz84 last edited by 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

                            S 1 Reply Last reply Reply Quote 0
                            • S
                              suleiman_as @jmriyaz84 last edited by

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

                              J 1 Reply Last reply Reply Quote 0
                              • J
                                jmriyaz84 @suleiman_as last edited by

                                @suleiman_as Quasar’s inbuild material io font

                                1 Reply Last reply Reply Quote 0
                                • J
                                  jmriyaz84 last edited by

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

                                  1 Reply Last reply Reply Quote 0
                                  • First post
                                    Last post