Webpack打包后.data文件无法访问的离线扫码工具问题排查

我尝试离线使用一款仪表与二维码扫描器，它依赖10个文件：2个.js文件、2个.gz文件和6个.data文件。我已在webpack.config.js中配置复制anylinejs文件夹：

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

编译项目时，GenerateSW日志显示service-worker.js将预缓存41个URL（此前为31个），说明相关文件已被识别。dist目录及生成的service-worker.js中均存在这些文件，但网络请求时，.gz和.js文件可正常访问，所有.data文件都无法访问。

完整的webpack.config.js配置 #

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'),
      },

    });

已尝试的解决方案（均无效） #

• 更换raw-loader、url-loader、wasm-loader、file-loader等多种loader
• 在CopyPlugin的patterns中指定具体文件路径而非文件夹
• 重新构建、清理缓存、注销service worker
• 尝试配置NPM file-loader
• 将anylinejs文件夹移入assets目录
• 在resolve.extensions中添加.data后缀
• 配置以下loader：

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

  以及：

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

内容的提问来源于stack exchange，提问作者N.Nagl