Bundling Dynamsoft JavaScript Barcode Library with Webpack

Webpack is a JavaScript module bundler. It is widely used in web frameworks, such as React and Angular. This tutorial shows how to implement a simple web barcode reading app with webpack and Dynamsoft JavaScript Barcode library.

What You Should Know

Setting Up a Basic Project with Webpack

Create a directory. Initialize the project and install webpack via npm:

mkdir webpack-dbr
cd webpack-dbr
npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev

Create webpack.config.js, src\index.js, and index.html.

Webpack.config.js is the configuration file used for bundling JavaScript modules:

const path = require('path');

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

The script above takes the ./src/index.js as the entry point and generates a dist/bundle.js as the output. So in index.html, we only need to include dist/bundle.js:

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

Before adding the barcode logic to index.js, let’s build the bundle.js file with the following command:

npx webpack --config webpack.config.js

The npx command is used to execute local npm package binaries. If you have installed webpack globally, you can run:

webpack --config webpack.config.js

Bundling Dynamsoft JavaScript Barcode

Download Dynamsoft JavaScript Barcode library:

npm install dynamsoft-javascript-barcode

Get a free trial license key.

Add the following code to index.js:

const BarcodeReader = require('dynamsoft-javascript-barcode')

BarcodeReader.licenseKey = 'DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==';
let scanner = new BarcodeReader.Scanner({
    onFrameRead: results => { console.log(results); },
    onNewCodeRead: (txt, result) => { alert(txt); }
});
scanner.open();

Try to run the build. You will see the error message below:

webpack javascript barcode error

To solve the “Module not found: Error: Can’t resolve ‘fs’” error, open webpack.config.js to add:

const path = require('path');

module.exports = {

entry: './src/index.js',
/////////////////////
    node: {
        fs: 'empty'
},
/////////////////////
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

Now you can successfully build the bundle.js file.

Install Web Server for Chrome to host the project, and then visit the index.html in Chrome.

dbrjs not found

Oops, error again. There are some files not found. We can use copy-webpack-plugin to copy the dependent files from node modules to the build directory. Install the webpack plugin:

npm install copy-webpack-plugin --save-dev

Add the plugin code in webpack.config.js:

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    plugins: [
        new CopyPlugin([
            {
                from: './node_modules/dynamsoft-javascript-barcode/dist',
                to: path.resolve(__dirname, 'dist'),
                ignore: ['*.ts'],
            }
        ]),
    ],

    entry: './src/index.js',
    node: {
        fs: 'empty'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

Rebuild the project and refresh the web barcode reader app. It’s working:

javascript web barcode reader

Source Code

https://github.com/dynamsoft-dbr/javascript-barcode/tree/master/examples/web/webpack-dbr