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

zer*_*ing 2 javascript webpack

我有一个如下所示的公共文件夹:
在此处输入图片说明

使用构建项目后

"prod": "npm run mlbuild | npm run build"
Run Code Online (Sandbox Code Playgroud)

dist 文件夹如下所示:

在此处输入图片说明

但我失踪了config.jsonfavicon.ico而且keycloak.json

期间如何将这些文件放入dist文件夹build

我试过:

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

但我想,我不得不提到文件夹。

Gab*_*rte 6

您可以设置插件copy-webpack-plugin来复制这些文件,并将其添加到您的 webpack.config.js 中:

plugins: [
    new CopyWebpackPlugin([{ from: 'public' }])
  ]
Run Code Online (Sandbox Code Playgroud)

并且以下要求: const CopyWebpackPlugin = require('copy-webpack-plugin')

另一种解决方案,如果你不想使用 webpack 来做,是在构建后使用包将这些文件复制到 dist 文件夹,添加以下脚本:

"postprod": "cpx \"public/*\" dist"
Run Code Online (Sandbox Code Playgroud)

并将包添加cpx到您的 devDependencies 列表中,运行npm install cpx --save-dev. 因为你添加了post前缀postprod,所以每次运行prod脚本时,npm 都会自动postprod在它之后运行,因此,会将 public 文件夹中的所有文件复制到 dist 文件夹中。您可以在此处阅读有关 npm 脚本的更多信息