[question] Separate output path for resources #9

Activity

1. webdiscus

   added

   questionFurther information is requestedFurther information is requested

   on Apr 18, 2022
2. webdiscus commented on Apr 18, 2022

   

   webdiscus

   on Apr 18, 2022

   Last edited by webdiscus

   OwnerAuthor

   More actions

   hello @myasarbardaklar,

   yes, it is possible.

   Common solution to hold same folder structure of asset resources in public path is using the property filename as the function.

   Add to the module.rules in webpack config:

   {
     test: /\.(png|jpg|jpeg|ico|svg|woff2)/, // filter for both images and fonts
     type: 'asset/resource',
     generator: {
       filename: (pathData) => {
         const { dir } = path.parse(pathData.filename); // get relative path started with `src/...`
         const outputPath = dir.replace('src/', ''); // remove the source dir from path
         return outputPath + '/[name].[hash:8][ext]'; // return output path with resource filename
       },
     },
   }

   The output path dist/ will be have same directory structure as src/.

   If you will use the responsive-loader then here is a bit complex. The option name is string. You can define here only some like [hash]-[width].[ext]. But exists the option outputPath that can be as function. Try to use this option like in example above.
3. Repository owner locked and limited conversation to collaborators on Apr 19, 2022
4. webdiscus

   converted this issue into a discussion #14 on Apr 19, 2022