How to Copy Static Files to Build Directory with Webpack

How to copy static files to build directory with Webpack?

You don't need to copy things around, webpack works different than gulp. Webpack is a module bundler and everything you reference in your files will be included. You just need to specify a loader for that.

So if you write:

var myImage = require("./static/myImage.jpg");

Webpack will first try to parse the referenced file as JavaScript (because that's the default). Of course, that will fail. That's why you need to specify a loader for that file type. The file- or url-loader for instance take the referenced file, put it into webpack's output folder (which should be build in your case) and return the hashed url for that file.

var myImage = require("./static/myImage.jpg");
console.log(myImage); // '/build/12as7f9asfasgasg.jpg'

Usually loaders are applied via the webpack config:

// webpack.config.js

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
        ]
    }
};

Of course you need to install the file-loader first to make this work.

How to copy files from public into dist?

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 do I copy a static folder to both dev and build in Vite?

The following changes should be an equivalent to your previous CopyWebpackPlugin settings:

1. vite-plugin-static-copy does not support an explicit ignore option, but you can set the src glob pattern to exclude dotfiles.

2. The dest should be './' to copy the files into the root of the output directory (default is dist).

import { defineConfig } from 'vite'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import path from 'path'

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: path.resolve(__dirname, './static') + '/[!.]*', // 1️⃣
          dest: './', // 2️⃣
        },
      ],
    }),
  ]
})

demo

Webpack 5: how to disable copying static files to build folder?

UPDATE:
I have some progress. Code disabling touching urls in css files, but fonts still copying:

{
    test: /\.css$/,
    use: ['vue-style-loader']
},
{
    test: /\.css$/,
    loader: 'css-loader',
        options: {
            url: false,
        },
},

UPDATE2: Done. Adding:

{
    test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
    type: "asset",
}

finally disabling generate other files. At now generating only /build/build.js file

---

Related Topics