const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const WorkboxPlugin = require("workbox-webpack-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const Visualizer = require('webpack-visualizer-plugin'); const path = require("path"); const fs = require("fs"); const config = require("./config.json"); const url = require("url"); module.exports = { devServer: { host: "0.0.0.0", // Defaults to `localhost` open: false, // Open the page in browser, contentBase: path.join(__dirname, 'dist'), disableHostCheck: true, headers: { "Access-Control-Allow-Origin": "*" }, watchOptions: { aggregateTimeout: 300, poll: 500 }, public: url.parse(config.callback_url).hostname }, plugins: [ new CopyWebpackPlugin([{ from: "public" }]), new HtmlWebpackPlugin({ title: 'SecureNotes', template: "./src/index.html" }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }), new BundleAnalyzerPlugin({ analyzerMode: "static", openAnalyzer: false }), new Visualizer(), // new WorkboxPlugin.GenerateSW({ // swDest: "sw.js", // importWorkboxFrom: 'local', // clientsClaim: true, // // importsDirectory: "/dist", // directoryIndex: 'index.html', // ignoreURLParametersMatching: [/./], // runtimeCaching: [{ // urlPattern: /images/, // handler: 'CacheFirst', // options: { // cacheName: 'images', // expiration: { // maxEntries: 1000, // //Recheck after 30 Days // maxAgeSeconds: 30 * 24 * 60 * 60 // }, // }, // }, { // urlPattern: /api/, // handler: 'NetworkOnly' // }] // }) ], entry: "./src/index.tsx", // Enable sourcemaps for debugging webpack's output. devtool: "eval", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"] }, module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }, { test: /\.(png|jpg)$/, loader: "file-loader", }, { test: /\.(scss|css)$/, use: [ "style-loader", // creates style nodes from JS strings MiniCssExtractPlugin.loader, "css-loader", // translates CSS into CommonJS "sass-loader" // compiles Sass to CSS, using Node Sass by default ] }, { test: /\.svg$/, use: ['preact-svg-loader'], } ] } };