How to keep the folder structure in output directory

[webdiscus]

1. I might have svg files in src/img folder. But I might also have svg files in src/fonts. I wanna seperate them in build time. src/img svg files to dist/img, src/fonts to dist/fonts. Like this.

2. If i have folder structure like this "src/img/banners" and if i require these images from "src/img/banners", can i have dist folder structure like this "dist/img/banners"? Or just "dist/img"? Because i can have kind of folder structures in src. Like "src/fonts/OpenSans/..." or "src/img/banners/...". I wanna have dist folder like this "dist/fonts/OpenSans/..." or "dist/img/banners/...".

[webdiscus]

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.

[webdiscus]

@jclow-sift

in next release I will implement you suggestion.
The pathData will have the filename property with source file.

According to the webpack documentation the PathData should contain the filename property, but not in entry.

type PathData = {
  hash: string;
  hashWithLength: (number) => string;
  chunk: Chunk | ChunkPathData;
  module: Module | ModulePathData;
  contentHashType: string;
  contentHash: string;
  contentHashWithLength: (number) => string;
  filename: string; // < === in entry is not available, but Pug plugin will define it in v4.1.0 (next release)
  url: string;
  runtime: string | SortableSet<string>;
  chunkGraph: ChunkGraph;
};

[jclow-sift]

That's lovely, thank you. I'll carry on using entry for this for now.

[webdiscus]

@jclow-sift

In the new release v4.1.0 the pathData argument of filename() function contain the filename property as absolute path to source file.

Note

To apply the filename() function to all Pug files defined in Webpack entry, use the filename(pathData) option of Pug plugin.

Please see the example by How to keep the source folder structure in output directory for all Pug files.

[webdiscus]

@jclow-sift

the Webpack config for your example:

const path = require('path');
const PugPlugin = require('pug-plugin');

const sourcePath = path.join(__dirname, 'src'); 

const keepPugFolderStructure = (pathData) => {
  const sourceFile = pathData.filename;
  const relativeFile = path.relative(sourcePath, sourceFile);
  const { dir, name } = path.parse(relativeFile);
  return `${dir}/${name}.html`;
};

module.exports = {
  entry: {
    // Note: each key must be unique, not used to generate the output filename.
    page001: './src/index.pug',                    // dist/index.html
    page002: './src/topic-one/topic-one.pug',      // dist/topic-one/topic-one.html
    page003: './src/topic-one/supporting-doc.pug', // dist/topic-one/supporting-doc.html
  },
  plugins: [
    new PugPlugin({
      // use the function to dynamic generate output filenames for all Pug files defined in the entry
      filename: keepPugFolderStructure,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(pug)$/,
        loader: PugPlugin.loader,
      },
    ],
  },
}

[webdiscus]

@jclow-sift
Is the problem solved?