How to use CopyWebPackPlugin in Quasar
-
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 .
-
@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
-
@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>>
-
Have you tried to change it in chainWebpack with output.filename & chunkFilename & mini-css-extract filename.
it should work -
@suleiman_as Thanks for your help , it would be great if you provide any sample code
-
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.
-
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 seeApp · 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.
-
@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", ... } ... } }
-
@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.
-
@stanley Glad
-
@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
-
@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 -
@jmriyaz84 Hello, Is it your own fonts or quasar’s?
-
@suleiman_as Quasar’s inbuild material io font
-
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”]
},
}