I’ve been doing quite a bit of work lately with webpack to process css and javascript for my websites. It does a great job of compressing and optimizing those assets. Where is seems to fall short is in the build processes I need to do to make a site deployable.

I don’t really put the fault for this on webpack. It’s not really intended to perform those sorts of tasks like creating .war files and moving things around.

There are attempts by 3rd party developers to add in that sort of functionality with plugins. While a lot of them are really great, using them puts you at the mercy of the tool developer.

One of the things I like to do is to take my build and bundle up the whole website so that I can create a package (either zip or war) and upload it to my hosting provider. Webpack really doesn’t like to do this sort of task, especially when things like AWS .ebextensions directories are involved.

I wrestled with this for quite a while before trying a different approach. NPM is what I use to kick off my webpack builds with it’s “scripts” capability. Being the simple-minded person that I am, I never did more than issue a webpack command with a command switch or two.

What I failed to realize was that you can concatenate multiple bash commands in that script file with something like

{
  ... ,
  "scripts": {
    "build": "webpack --config webpack.prod.js && cp './build/ROOT.war' './build_archive/'$(date +'%Y%m%d_%H%M')'.war'",
  }
}

• Note the nifty way to put the date and time in the filename

While that is great, if you have more than one or two commands to enter, it can get a bit unwieldy.

Lets say you have a bunch of file manipulation commands you need to do. In that case, you can take all of that stuff and stick it in a bash script. I created a file called build.sh at the same location as my package.json file with these content:

#!/usr/bin/env bash
cp -R './build/static' './wwwroot/static'
cp './build/ROOT.war' './build_archive/'$(date +'%Y%m%d_%H%M')'.war'

You could do a lot more in there if you need to.

Now I can adjust my package.json scripts attribute to be

{
  ... ,
  "scripts": {
    "build": "webpack --config webpack.prod.js && ./build.sh"
  }
}

Neat! Now, when I execute my build command, webpack does all of its magic and then the build.sh file kicks off and moves things around.