const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const WebpackPwaManifest = require("webpack-pwa-manifest"); module.exports = { resolve: { extensions: [".js"] }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"] }, { test: /\.js$/, exclude: /(node_modules)/, use: { loader: "babel-loader" } }, { test: /\.(wsz|mp3|png|ico|jpg|svg)$/, use: [ { loader: "file-loader", options: { emitFile: true, name: "[path][name]-[hash].[ext]" } } ] } ], noParse: [/jszip\.js$/] }, plugins: [ new HtmlWebpackPlugin({ template: "./index.html" }), // Automatically generates the manifest.json file inside the built // directory, and injects a tag into the gererated index.html file // it also, applies cache-busting for all the icons. new WebpackPwaManifest({ name: "Winamp", short_name: "Winamp", // eslint-disable-line camelcase description: "Winamp 2.9 reimplemented in HTML5 and JavaScript", start_url: "./?utm_source=web_app_manifest", // eslint-disable-line camelcase scope: "./", display: "standalone", theme_color: "#4b4b4b", // eslint-disable-line camelcase background_color: "#ffffff", // eslint-disable-line camelcase icons: [ { src: path.resolve("./images/manifest/icon-192x192.png"), sizes: "192x192", type: "image/png" }, { src: path.resolve("./images/manifest/icon-512x512.png"), sizes: "512x512", type: "image/png" }, { src: path.resolve("./images/manifest/icon.svg"), sizes: "513x513", type: "image/svg+xml" } ].map(icon => ({ ...icon, destination: path.join("images", "manifest") })) }) ], entry: { winamp: ["./js/index.js"] }, output: { filename: "[name]-[hash].js", publicPath: "/", path: path.resolve(__dirname, "../built") } };