Правильно ли настроен webpack.config для PWA приложения?

при запуске проекта не находит изображение каторое указано в manifest.webmanifest. И не срабаотывает событие beforeinstallprompt. Но до сборки вебпаком все работало без проблем.

{
  "name": "Random Game",
  "start_url": "index.html",
  "orientation": "portrait",
  "display": "fullscreen",
  "icons": [
    {
      "src": "./images/random-icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "src", "index.js"),
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "js/[name].[contenthash].js",
    clean: true,
    assetModuleFilename: "assets/[name]-[contenthash][ext]",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        type: "asset/resource",
        generator: {
          filename: "images/[name].[hash][ext][query]",
        },
      },
      {
        test: /\.(wav|mp3)$/,
        type: "asset/resource",
        generator: {
          filename: "sounds/[name].[hash][ext][query]",
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.webmanifest$/,
        type: "asset/resource",
        generator: {
          filename: "[name][ext]",
        },
      },
    ],
  },
  devServer: {
    open: true,
    compress: true,
    port: 8080,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
      files: {
        manifest: "./manifest.webmanifest",
      },
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:8].css",
      chunkFilename: "css/[name].[contenthash:8].css",
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "manifest.webmanifest"),
          to: path.resolve(__dirname, "build", ""),
        },
      ],
    }),
  ],
};


Ответы (0 шт):