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(), ], entry: { main: "./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", ".mjs"] }, 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'], } ] } };