Executing shell command after Webpack post build

Question

I have a Laravel project and as you know when you deploy your app everything in your public directory should be copied over to your htdocs or public_html directory to hide your application's code.

I am using webpack to build my react code and everything else and each time I change my javascript webpack does what I want, it sees I make a change and then it builds it. However I want to add one additional command after it builds and that is to copy everything from the public directory into the correct directory in htdocs/public_html.

So far I read up on this question here Run command after webpack build

It works and I can get the echo to work but I'm not sure why cp isn't working. Echo works but how do I know what shell commands I can use? I tried 'cp' and even 'copy-item' which is powershell, but none are working.

This is my plugin so far, I figured I needed to change the directory to be safe before copying anything over but again, nothing is working.

mix.webpackConfig(webpack => {
  return {
    plugins: [
      new WebpackShellPlugin({
        onBuildStart: ['echo "Starting Build ..."'],
        onBuildEnd: ["cd 'E:\\xammp\\apps\\FactorioCalculator'",
          "cp '.\\public\\*' '..\\..\\htdocs\\FactorioCalculator\\' -f -r"]
      })
    ]
  };
});

i suggest writing the commands in a seperate `.sh` file and calling that from the above events, since each `" "` is ran as a standalone command — Quezler, Aug 15 '18 at 19:28

score 1 · Accepted Answer · answered Aug 15 '18 at 19:32

You could always use the copyDirectory mix method. Just put something like the following at the bottom of your webpack.mix.js file:

mix.copyDirectory('public', '../../htdocs/FactorioCalculator/')

You might have to change your path to ..\\..\\htdocs\\FactorioCalculator\\ as per the path in your question (I only have my mac with me so I'm unable to test on my other machine).

To answer you original question, if you want to execute a command each time webpack finishes building you can use the mix.then() which takes a closure.

Executing shell command after Webpack post build

1 Answers1