How to copy files from public into dist?

Question

I have a public folder that looks as follows:

After building the project with

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

the dist folder looks as following:

But I am missing config.json, favicon.ico and keycloak.json.

How to take these files into dist folder during the build?

I tried:

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

But I think, I have to mention the folder.

Possible duplicate of [How to copy static files to build directory with Webpack?](https://stackoverflow.com/questions/27639005/how-to-copy-static-files-to-build-directory-with-webpack) — Andrea Carraro, May 19 '18 at 21:54

Gabriel Duarte · Accepted Answer · 2018-05-19T21:19:24.043

You can just setup the plugin copy-webpack-plugin to copy those files, adding this to your webpack.config.js:

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

and the following require: const CopyWebpackPlugin = require('copy-webpack-plugin')

Another solution, if you don't want to do it using webpack, is to use a package to copy those files to the dist folder after the build, adding the following script:

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

and add the package cpx to your list of devDependencies, running npm install cpx --save-dev. Because you added the post prefix to postprod, everytime you run the prod script, npm will automatically run postprod after it, and therefore, will copy all files inside the public folder to the dist folder. You can read more about npm scripts here

How to copy files from public into dist?

1 Answers1