Thanks for downloading Dynamsoft Barcode Reader Package!

Your download will start shortly. If your download does not begin, click here to retry.

JavaScript Hello World Sample - WebPack

Webpack is a static module bundler for modern JavaScript applications. While webpack is used by almost all the popular JavaScript frameworks as the basis of their build system, it can also be used alone. In this article, we will take a look at how to use the Dynamsoft Barcode Reader JavaScript SDK (hereafter called “the library”) with just webpack as shown in the code:

Read Barcodes from Camera - Webpack - Source Code

Create a simple application with Webpack

Create a configuration file

Create a file with the name webpack.config.js and input the following content

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

The above example code tells webpack to do the following things

Find the file index.js in the /src/ directory which is relative to the current running path (absolute path on the disk)
Bundle the relative JavaScript files into a single file bundle.js, then output it under the /dist/ directory.

Create the source file

Create a directory /src/, then create a index.js file under it with the following content

import BarcodeScanner from "dynamsoft-javascript-barcode";
BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/";

let pScanner = null;
if (document.getElementById('readBarcode')) {
    document.getElementById('readBarcode').onclick = async function() {
        try {
            let scanner = await (pScanner = pScanner || BarcodeScanner.createInstance());
            scanner.onFrameRead = results => {
                console.log("Barcodes on one frame:");
                for (let result of results) {
                    const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2;
                    console.log(format + ": " + result.barcodeText);
                }
            };
            scanner.onUniqueRead = (txt, result) => {
                alert(txt);
                console.log("Unique Code Found: " + result);
            }
            await scanner.show();
        } catch (ex) {
            alert(ex.message);
            throw ex;
        }
    };
}

The example code above loads the library and creates a BarcodeScanner object to do barcode scanning. Note that the function is registered to a button with the ID “readBarcode” which exists on the page we create in the next step.

Create the web page

Create a file with the name index.html and put it together with webpack.config.js. The content is as follows:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body>
    <button id="readBarcode">show scanner</button>
    <script src="./dist/bundle.js"></script>
</body>

</html>

Note that the page is looking for the bundle.js file which is the output from webpack.

Add dependencies and compile scripts

Now we have all the code we need except for the library and the bundler which is webpack. We can add a package.json file with the following content

{
    "name": "helloworld-webpack",
    "version": "1.0.0",
    "description": "Use the Dynamsoft Barcode Reader JavaScript SDK with just webpack",
    "scripts": {
        "build": "webpack --config webpack.config.js",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Dynamsoft Team",
    "devDependencies": {
        "webpack": "5.52.1",
        "webpack-cli": "4.8.0"
    },
    "dependencies": {
        "dynamsoft-javascript-barcode": ""
    }
}

Run the following script to install the dependencies:

npm install

Compile and run

The package configuration file in the last step already includes the compile script, we can build the application like this:

npm run-script build

The output file “bundle.js” will appear under the /dist/ directory.

Test the sample

Open index.html, click “show scanner” and you will soon get a working page that scans barcodes.

Extra notes

Load the library locally

The example code above uses the library via a CDN, you can also use a local copy of the library by using “copy-webpack-plugin”:

npm install copy-webpack-plugin

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin'); // For copying local resources

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: './node_modules/dynamsoft-javascript-barcode/dist',
                    to: path.resolve(__dirname, 'dist'),
                }
            ]
        }),
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

Don’t forget to change engineResourcePath in index.js:

BarcodeScanner.engineResourcePath = './dist/'