Decrypt assets with webpack
If your public repository includes files you can't share with the world, one solution is to encrypt them. Decryption-loader allows you to encrypt assets via CLI and decrypt them at build-time right in webpack.
npm install decryption-loader
npx decryption-loader example.txt
You will be prompted for a password and an encrypted file
example.txt.enc is created.
moduleexports =// ...module:rules:test: /\.enc$/loader: "decryption-loader"options:password: "password"// ...;
Be careful: Your webpack configuration file is probably not a safe place to keep passwords.
password(string) required: The password used to derive the encryption key
Say you have
font.woff, a commercial font that you want to include in your public repository, but can't because of licensing issues. Let's encrypt it to solve this problem:
npx decryption-loader font.woff
2: Store password
We need a save place to store the password. We'll put it in the environment variable
PASSWORD. We can use dotenv to set the variable in the context of our local repo:
npm install dotenv
Be sure to add the unencrypted font file and
.env to your
.gitignore to keep them out of the public repo:
Now we have to decrypt the font at build time using webpack:
/* Read variables from .envIf actual environment variables are setthe values in .env are ignored */;moduleexports =// ...module:rules:test: /\.$/use:loader: "file-loader"// Not including [ext] strips the .cast5 extension from the filenameoptions: name: "[name]"loader: "decryption-loader"options: password: processenvPASSWORD// ...;
And we're done. The encrypted file is now decrypted and then processed by file-loader as
font.woff. You can reference the encrypted file
font.woff.enc in your CSS like a normal font file.