Giters

samrith-s / parcel-plugin-structurize

A plugin to customize the output (dist) directory structure during production.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[🐛] Bug: Some assets not properly referenced

3ub41r opened this issue · comments

commented

Some of the assets are not properly referenced.

This is my parcel-plugin-structurize.json file:

{
    "rules": [
        {
            "match": "*.js",
            "folder": "js"
        },
        {
            "match": "*.css",
            "folder": "css"
        },
        {
            "match": "*.{jpg,jpeg,jpeg2,png,gif,svg,bmp,webp}",
            "folder": "images"
        }
    ]
}

Expected behavior

I have configured the plugin to move .css files to the directory css.

The files are moved appropriately, but when it is referenced from the HTML the directory is not taken into consideration. I have included a screenshot of the generated HTML to illustrate what I mean.

Screenshots

This is the generated HTML.

image

Information

  • Package version: 2.3.1
  • Node version: 12.5.0

Thanks for all your effort. I not very proficient in Javascript, sorry. Let me know if there is something I've missed.

commented

I'm facing the same bug when trying to build my projects

here my rules config on package.json
image

and i got my css link are not correct
image

Version: 2.3.1

Thanks btw

commented

Hello @xxidbr9 and @3ub41r thank you for the report!

Could you guys provide a minimal reproducible repository so I can debug it quicker?

Alternatively, can you set the verbose and displayAssetsMap option to true in the config and copy-paste the output here?

{
	"verbose": true,
	"displayAssetsMap": true,
	"rules": [
		// your rules
	]
}

Sorry for the delayed response, I was on vacation.

commented

I'm facing the same bug when trying to build my projects

here my rules config on package.json
image

and i got my css link are not correct
image

Version: 2.3.1

Thanks btw

For this particular thing, can you try removing all *.*.map? The plugin automatically moves all the corresponding map files to the relevant directory. So the JS and CSS maps would be moved automatically. See the second Gotcha.

commented

@3ub41r @xxidbr9 I tried both your config files, and everything works fine on my end. You can check it here:

@3ub41r output

Configuration:

{
    "verbose": true,
    "displayAssetsMap": true,
    "rules": [
        {
            "match": "*.js",
            "folder": "js"
        },
        {
            "match": "*.css",
            "folder": "css"
        },
        {
            "match": "*.{jpg,jpeg,jpeg2,png,gif,svg,bmp,webp}",
            "folder": "images"
        }
    ]
}

HTML:

<html>
    <head>
        <title>Parcel Plugin Structurize - Basic</title>
        <link rel="stylesheet" href="/css/main.3673b2a2.css" />
    </head>
    <body>
        Parcel plugin structurize test!
        <img src="/images/html-5-logo.18af91a1.webp" alt="HTML5 logo" width="150" />
        <p id="root"></p>
        <script src="/js/js.778fdcdf.js"></script>
    </body>
</html>

Output:
image

@xxidbr9 output

Configuration:

{
    "verbose": true,
    "displayAssetsMap": true,
    "rules": [
        {
            "match": "*.{js,js.map}",
            "folder": "assets/js"
        },
        {
            "match": "*.{css,css.map}",
            "folder": "assets/css"
        },
        {
            "match": "*.{png,svg,jpg,jpg2,jpeg,gif,bmp,webm,webp}",
            "folder": "assets/img"
        }
    ]
}

HTML:

<html>
    <head>
        <title>Parcel Plugin Structurize - Basic</title>
        <link rel="stylesheet" href="/assets/css/main.3673b2a2.css" />
    </head>
    <body>
        Parcel plugin structurize test!
        <img src="/assets/img/html-5-logo.18af91a1.webp" alt="HTML5 logo" width="150" />
        <p id="root"></p>
        <script src="/assets/js/js.778fdcdf.js"></script>
    </body>
</html>

Output:
image

You can also check that all the tests pass for all the supported Node versions and all OSes.

commented

yes it fix, thanks alot 🎉👏🏻

commented

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.