CODEWITHSUNDEEP
javascriptcsswebpack
0xC0DED00D
0xC0DED00D

Reputation: 20348

Copy build files to another project using webpack

I have two project folders in the same parent folder. One is for front end files (JS, CSS, images etc.) and another is for the backend files. The frontend project uses webpack to build files into a dist folder. The backend project is the one which gets deployed to the server (or run on localhost).

So everytime I make change to a JS or CSS file, I run webpack build, copy the build files from frontend-project/dist folder to backend/frontend/js or backend/frontend/css folder and rerun the backend project.

This is really counter-productive. I want to copy the dist files automatically after build to the backend-project. Is there any way to do it in webpack using a plugin or without using one? I have used gulp for such kind of tasks before, but want to rely solely on webpack for now.

I tried the copy-webpack-plugin, but it doesn't run after the build, thus is not useful for me.

Upvotes: 5

Views: 5310

Answers (1)

Andrii Golubenko
Andrii Golubenko

Reputation: 5179

I see several ways how to reach your purposes:

  1. You could specify your backend/frontend/js folder as an output folder for your bundles.
module.exports = {
    //...
    output: {
        path: path.resolve(__dirname, '../backend/frontend')
    }
};
  1. If you need two copies of your bundles (one in frontend folder and another in the backend), you can use FileManagerPlugin to copy your bundle files to the backend after finishing of the build.
module.exports = {
    //...
    plugins: [
        new FileManagerPlugin({
            events: {
                onEnd: {
                    copy: [
                        {
                            source: path.join(__dirname, 'dist'),
                            destination: path.join(__dirname, '../backend/frontend')
                        }
                    ]
                }
            }
        })
    ]
};
  1. If you run build manually after every code change, I think this is unproductive. You can use webpack-dev-server to run build automatically when you develop. It doesn't store bundles in the file system, it keeps them in memory.

Upvotes: 9

Related Questions