Using parcel-plugin-custom-dist-structure with parcel

When building with Parcel, all the files are bundled and share the same root folder:

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:

"customDistStructure": {
    "config": {
      ".js": "assets/js",
      "assets/img": [
        ".jpg",
        ".png"
      ],
      ".css": "assets/css",
    },
    "options": {
      "development": true
    }
  }

Then your build will get this structure:

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:

"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à !

dist
  |- index.html
  |- assets
        |- css
          |- index.5243.css
          |- index.5243.css.map
        |- js
          |- index.5243.js
          |- index.5243.js.map

FFP – Fédération Française du Paysage » « Woocommerce membership plugin : include custom field in admin search