When I first started learning Webpack, one issue that I continually ran into was how to configure different Webpack 5 builds across the same code base. In some instances, I wanted to run a full blown dev build, complete with code source maps that I would use to debug local changes I was working on. At other times, I wanted to simulate a production build with minification and production level settings enabled to see how my code would run in production, prior to issuing a pull request.
The following post lays out a strategy for initiating separate dev and release builds across the same codebase using npm, command line parameters and webpack environment variables. This code can easily be integrated into a CI/CD pipeline for managing complex build and release processes via command line arguments passed in as triggers.
Beyond simulating local dev builds and environmental builds in even further advanced scenarios, it would be possible prior to kicking off a webpack build to run api requests via node.js to retrieve environment parameters.
You can find the full source in my Github account project https://github.com/BrianMikinski/WebPackArgs
Let’s get started!
Webpack File Layouts
Assuming a source and dist configuration, when configuring webpack builds for dev and production environments, you will want to break down your builds as follows
- dist
- src
- index.html
- index.js
- package.json
- webpack.config.js
- webpack.dev.js
- webpack.prod.js
- passInArgs.ps1
For the time being, ignore the src, dist and remaining build files. As I am sure you can guess, the webpack.config.js file will configure the build to select either the webpack.dev.js file or the webpack.prod.js using an environment flag passed into the webpack build via an npm run script.
Passing Command Line Data to Webpack Via NPM Run Arguments
A quick note about passing variables from npm run scripts to webpack - if you are using any version of Webpack prior to Webpack 5, you cannot pass command line values to webpack using –env style syntax. This functionality was changed in Webpack 5.0 and this example will only work with Webpack 5.
Passing a variable from a npm run block can be done as follows using –env envVarName=Value. This appendage to the run block will ensure that the webpack script env paramater is set with env.EnvVarName equal to the value that it was assigned at the command line. In our example repo, that looks like this -
1
2
3
4
5
...
"scripts": {
"build": "webpack --config=webpack.config.js --env build=dev",
},
...
This script can then be called from the command line using by running
1
npm run build
In this npm build script we are telling webpack to use the webpack.config.js file to run webpack with the –config-webpack.config.js environment variable. Then, with the –env build=dev we are passing an additional environment variable called “env” and assigning it a “build=dev” value.
Using Environment Variables to Select Webpack Environments
Now that we have the ability to pass data from the command line npm run scripts and ultimately to Webpack, we can start putting our command line arguments to good use.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use strict';
module.exports = (env, argv) => {
console.log(`Environment Build: ${env.build}`);
switch (env.build) {
case "prod":
return require("./webpack.prod.js")
case "dev":
return require("./webpack.dev.js");
default:
console.log("Error: parameter build could not be found");
break;
}
};
In the code sample above taken from the webpack.config.js file, webpack is accepting the commandline argumens via the env variable and assigning a env.build to equal “dev”. Using the command line arguements, we then select a preconfigured build type for either a production or dev environment.
Passing Environment Variables in a CI/CD
In a build server environment, we may want to have the additional ability to pass the env.build variables from the command line to npm and subsquently to webpack. An example of this can be found in the passInArgs.ps1 file.
Command line environment variables are passed to npm using double dash syntax – appended to the npm run command.
1
2
3
# example of passing in an environment variable from the command line, to an npm script and
# subsequently to webpack 5
npm run build:noenv -- --env build=dev
Conclusion
While this is a minimal and contrived example, because we are running node.js at the command line we could easily extend this Webpack configuration to make it much more powerful. This configuration could call out to a webservice that contains build/release information, or it could take in a serialized json payload as a string env assignment and subsequently deserialize it to reveal the desired flags for setting the build. I hope you enjoyed this tutorial and please feel free to leave any comments below. Happy Coding!
Resources
