@azure/storage-blob Web Worker Webpack 5

README.md

Webpack 5 Configuration to enable running @azure/storage-blob in Web Worker using jsdom to polyfill required XML parser API. JavaScript source code can be copied directly from https://github.com/Azure/azure-sdk-for-js/tree/main/samples/web-workers/js

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": "true",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.1",
    "local-web-server": "^5.3.0",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2"
  },
  "dependencies": {
    "@azure/storage-blob": "^12.14.0",
    "jsdom": "^21.1.1",
    "node-polyfill-webpack-plugin": "^2.0.1"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        worker: './src/worker.js',
        polyfill: './src/polyfill.worker.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Storage Web Worker Sample',
        }),
        new NodePolyfillPlugin({
            includeAliases: [
                "path", "stream", "process", "Buffer"
            ]
        })
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    resolve: {
        extensions: [".js"],
        fallback: {
            child_process: false,
            crypto: false,
            http: false,
            https: false,
            os: false,
            zlib: false,
            perf_hooks: false,
            fs: false,
            net: false,
            tls: false,
        },
    },
};