SecureNotes/webpack.config.js

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'],
         }
      ]
   }
};