如何使用带有 angular-builder 的自定义 webpack 将整个目录复制到 dist/ 中？

Question

我正在使用 Angular 构建器在生成的dist/目录中添加一些额外的文件和文件夹。 在这种情况下，我希望将目录src/assert/puppies和src/assert/kittens复制到名为animals/的文件夹中。

换句话说，我想要这个

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

成为这个

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

---

angular.json

这是我的 angular.json 文件的相关部分：

"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"
            }
          }, 

这是我的custom-webpack.config.js 。 我已经在那里有了这些内容，因为我希望编译和复制这些脚本。

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

我要向custom-webpack.config.js添加什么以使其以上述方式将这些资产文件夹复制到dist/中？

Answer 1

您可以使用CopyWebpackPlugin 。

将其导入您的 custom-webpack.config.js：

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

然后将其添加到您的插件中：

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