How do I copy an entire directory into dist/ using custom webpack with angular-builders?

Question

I'm using Angular builders to add some additional files and folders in the dist/ directory generated. In this case I want to have the directories src/assert/puppies and src/assert/kittens copied into a folder called animals/.

In other words, I want this

src/
 |--- assets/
        |----puppies/
                |--- *.jpg
                |--- ....
        |----kittens/
                |--- *.jpg
                |--- ....

to become this

dist/
 | main.js
 | vendor.js
 | ...
 |--- animals/
         |--- images...

---

angular.json

This is the relevant portion of my angular.json file:

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json",
              {
                "input": "node_modules/jquery/dist",
                "glob": "jquery.js",
                "output": "./vendor"
              }
            ],
            "styles": ["src/styles.scss"],
            "scripts": [],
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            }
          }, 

This is my custom-webpack.config.js. I already have this content in there because I want these scripts to be compiled and copied over.

module.exports = {
  entry: {
    "special-scripts/login":
      "src/custom/login/login.ts",
    "special-scripts/logout":
      "src/custom/logout/logout.ts"
  }
};

What do I add to custom-webpack.config.js to get it to copy over those asset folders into dist/ in the way I described above?

Answer 1

You can use the CopyWebpackPlugin.

Import it into your custom-webpack.config.js:

const CopyPlugin = require('copy-webpack-plugin');

Then add it to your plugins:

plugins: [
  new CopyPlugin([
    { from: './src/assets/*', to: 'dist/animals/' },
  ]),
  ...
]