binary-base64-loader
v1.0.0
A loader for webpack that allows importing binary files as a String
0/weekUpdated 3 years agoMITUnpacked: 5.9 KB
Published by Gyula Kisrákói
npm install binary-base64-loaderbinary-base64-loader
A webpack loader that allows loading binary files as Base64 encoded strings.
Based on https://github.com/webpack-contrib/raw-loader
Getting Started
Install binary-base64-loader:
``console`
$ npm install binary-base64-loader --save-dev
After that you can load files with specific extensions using webpack config as usual, for example:
webpack.config.js
`js`
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.bin$/i,
use: 'binary-base64-loader',
},
],
},
};
Then you can import the content of binary files with the given extension as Base64 encoded strings:
`js`
import bigAsset from './asset.bin';
// bigAsset will equal to 'WW91IGp1c3QgbG9zdCBUSEUgR0FNRSE=...
Most probably though you will want to use the loader inline, without registering specific extensions in the webpack config. For example:
`js`
import fontBinary from '!!binary-base64-loader!./funkyicons.ttf';
(The !! prefix is not obligatory but probably you will need it to remove other loaders from the chain which could apply based on the webpack config)
To make the inline use work under Typescript add this to a Typescript definition file in your project (*.d.ts, for example shims-vue.d.ts):
`typescript`
declare module "!!binary-base64-loader!*" {
const content: string;
export default content;
}
Options
| Name | Type | Default | Description |
| :-------------------------: | :---------: | :-----: | :--------------------- |
| esModule | {Boolean} | true | Uses ES modules syntax |
$3
Type: Boolean
Default:
By default, binary-base64-loader generates JS modules that use the ES modules syntax.
There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.
You can enable a CommonJS module syntax using:
webpack.config.js
`js``
module.exports = {
module: {
rules: [
{
test: /\.bin$/i,
use: [
{
loader: 'binary-base64-loader',
options: {
esModule: false,
},
},
],
},
],
},
};