When building with Parcel, all the files are bundled and share the same root folder:
|
1 2 3 4 5 6 |
dist |- index.html |- index.5243.css |- index.5243.css.map |- index.5243.js |- index.5243.js.map |
Fortunately, the plugin parcel-plugin-custom-dist-structure lets you generate the structure you want for you build. Once installed, you just have to configure the plugin settings in package.json. For example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
"customDistStructure": { "config": { ".js": "assets/js", "assets/img": [ ".jpg", ".png" ], ".css": "assets/css", }, "options": { "development": true } } |
Then your build will get this structure:
|
1 2 3 4 5 6 7 8 9 |
dist |- index.html |- assets |- css |- index.5243.css |- js |- index.5243.js |- index.5243.css.map |- index.5243.js.map |
But wait… what about the map files ?
Well, you just need to add it this way:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
"customDistStructure": { "config": { ".js": "assets/js", ".js.map": "assets/js", "assets/img": [ ".jpg", ".png" ], ".css": "assets/css", ".css.map": "assets/css" }, "options": { "development": true } } |
And voilà !
|
1 2 3 4 5 6 7 8 9 |
dist |- index.html |- assets |- css |- index.5243.css |- index.5243.css.map |- js |- index.5243.js |- index.5243.js.map |
Hi Trân!
I am the creator of the plugin. Thank you for showing it on your blog!
The last example can be also written like this to improve readability :)
“customDistStructure”: {
“config”: {
“assets/js”: [
“.js”,
“.js.map”,
],
“assets/img”: [
“.jpg”,
“.png”
],
“assets/css”: [
“.css”,
“.css.map”
]
},
“options”: {
“development”: true
}
}
JSON can’t be formatted in the comment :(
I know, sorry for that…
Thanks for the great plugin !