CODEWITHSUNDEEP
javascriptwebpack
softshipper
softshipper

Reputation: 34119

How to copy files from public into dist?

I have a public folder that looks as follows:
enter image description here

After building the project with 

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

the dist folder looks as following:

enter image description here

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.

Upvotes: 7

Views: 6187

Answers (1)

Gabriel Duarte
Gabriel Duarte

Reputation: 1003

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

Upvotes: 11

Related Questions