webpack.config.js with .data (binary) Files

I try to use a meter and qr scanner offline. This scanner needs 10 Files 2 .js, 2 .gz and 6 .data files.

I added the folder in my webpack.config.js like this:

{ from: 'anylinejs', to: 'anylinejs' }

Webpack.config.js

When I compile my project I get the message:

LOG from GenerateSW

\<i\> The service worker at service-worker.js will precache
\<i\>         41 URLs, totaling 53.6 MB.

Before there where just 31 URLs so it was able to find the files.

In my /dist folder all the files appear also. Even in the generated service-worker.js the files appear: generated service-worker.js

Sadly I get this error in my network tab: network Tab error

I can access the .gz and the .js files but none of the .data files.

This is my whole webpack.config.js file:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { GenerateSW } = require('workbox-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Webpack has the task to copy everything to dist folder where the whole application lands


module.exports = (env) => ({
  cache: false,
  plugins: [new MiniCssExtractPlugin(), new CopyPlugin({
    patterns: [
      { from: "assets", to: "assets/[path]/[name][ext]", },
      { from: "manifest.json" },
      { from: "favicon.ico" },
      { from: "node_modules/qr-scanner/qr-scanner-worker.min.js" },
      { from: './jquery-3.7.0.min.js' },
      { from: './select2.min.js' },
      { from: './select2.min.css' },
      { from: 'anylinejs', to: 'anylinejs' }
    ],
  }),
  new HtmlWebpackPlugin({
    template: 'index.html'
  }),
  env.dev ? undefined : new GenerateSW({
    navigateFallback: 'index.html',
    maximumFileSizeToCacheInBytes: 4 * 1024 * 1024 * 1024
  })].filter(v => !!v),
  entry: './src/site.ts',
  module: {
    rules: [

      {
        test: /\.data/,
        use: 'raw-loader'
      },
      {
        test: /\.data?$/,
        use: 'file-loader'
      },


      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.html$/,
        use: 'raw-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      }
    ],
  },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
     fallback: {
       crypto: require.resolve('crypto-browserify')
     },
   },
   output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
      },

    });

I tried following things:

1. Changed the the loader to raw-loader, url-loader, wasm-loader and file-loader
2. In the Patterns specify the path to the file not the folder
3. Build, rebuild, clear cache, unregister service worker
4. NPM file-loader
5. Put anylinejs Folder into assets folder
6. Add .data files into the resolve -> extensions
7. this loader:

    {
        test: /\.(data)$/i,
        dependency: { not: ['url'] },
        use: [{
          loader: 'url-loader',
          options: { limit: 8192, }
        }]
      },

and this:

    {
        test: /\.data$/,
        loader: 'raw-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'anylinejs/'
        }
      },

I was able to find a solution that worked.

You have to go to your Backend in my case .NetCore where you need to provide a new mapping.

static files in ASP.NetCore

In my case I added following Code in the Startup.cs File:

var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".data"] = "application/octet-stream";
  

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});