Webpack: Need to find way to copy assets like image to proper directory

[llighter]

webpack file loader

In web.dev, They use gulp to copy images.

For example.

const assetTypes = `jpg,jpeg,png,svg,gif,webp,webm,mp4,mov,ogg,wav,mp3,txt,yaml`;

...

// Images and any other assets in the content directory that should be copied
// over along with the posts themselves.
// Because we use permalinks to strip the parent directories form our posts
// we need to also strip them from the content paths.
gulp.task('copy-content-assets', () => {
  return gulp
    .src([
      `./src/site/content/en/**/*.{${assetTypes}}`,
    ])
    .pipe(gulpif(isProd, imagemin([
      pngquant({quality: [0.8, 0.8]}),
      mozjpeg({quality: 80}),
    ])))
    // This makes the images show up in the same spot as the permalinked posts
    // they belong to.
    .pipe(
      rename(function(assetPath) {
        const parts = assetPath.dirname.split('/');
        // Let the en/images directory pass through.
        if (parts[0] === 'images') {
          return;
        }
        // Let en/handbook images pass through.
        if (parts[0] === 'handbook') {
          return;
        }
        return assetPath.dirname = path.basename(assetPath.dirname);
      })
    )
    .pipe(gulp.dest('./dist/en'));
});

[llighter]

I think this job that copying assets to proper directory is more fit to use gulp..

Here's relative contents to read.

Task Runners (Gulp, Grunt, etc) and Bundlers (Webpack, Browserify). Why use together?

Gulp + Webpack or JUST Webpack?

The bottom line is webpack is package bundler and gulp is take runner. They have a different purpose. So, I can use both when I need to.

[llighter]

Check point

• [ ] copy-content-assets
• [ ] copy-global-assets