如何将文件从public复制到dist？

Question

我有一个公共文件夹，如下所示：
在使用以下命令构建项目后：

"prod": "npm run mlbuild | npm run build"

dist文件夹如下所示：

但是我缺少 config.json、favicon.ico 和 keycloak.json。

如何在 build 过程中将这些文件添加到 dist 文件夹中？

我尝试过：

  {
    test: /\.(json)(\?v=\d+\.\d+\.\d+)?$/,
    use: [{
      loader: 'file-loader',
      options: {
        name: '[name].[ext]'
      }
    }]
  }

但是我认为，我必须提到这个文件夹。

- softshipper

---

可能是如何使用Webpack将静态文件复制到构建目录？的重复问题。 - Andrea Carraro

Answer 1

你可以使用插件copy-webpack-plugin来复制这些文件，只需将以下内容添加到你的webpack.config.js即可：

plugins: [
    new CopyWebpackPlugin([{ from: 'public' }])
  ]

以下内容需要使用：const CopyWebpackPlugin = require('copy-webpack-plugin')

如果您不想使用webpack来完成此操作，另一个解决方案是在构建后使用软件包将这些文件复制到dist文件夹中，添加以下脚本：

"postprod": "cpx \"public/*\" dist"

需要将cpx包添加到你的devDependencies列表中，执行命令npm install cpx --save-dev。 因为你在postprod前缀中添加了post，每次运行prod脚本时，npm都会自动在其后运行postprod，从而将公共文件夹内的所有文件复制到dist文件夹中。你可以在这里了解更多关于npm脚本的信息。

- Gabriel Duarte