loadax/root/webpack.config.js

Universal powerful solution for creating web app

const devMode = process.env.NODE_ENV === "development";
const path = require('path');
const Dotenv = require('dotenv-webpack')
const os = require.resolve("os-browserify/browser")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const envPath = devMode? './.env.example' : './.env'
require('dotenv').config({ path: envPath })

module.exports ={
    entry: './src/App.tsx',
    mode: "development",
    module: {
        rules: [
            {
                test: /\.(ts|tsx)?$/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(ts|tsx)?$/,
                loader: 'imports-loader',
                options: {
                    additionalCode: "import 'regenerator-runtime'",
                }
            },
            {
                test: /\.(tsx)?$/,
                loader: 'imports-loader',
                options: {
                    additionalCode: "var LoadaxJsx = require('loadax').LoadaxJsx;",
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ]
            }
        ],
    },
    plugins: [
        new Dotenv({
            path: envPath,
            safe: true,
        }),
        new CopyPlugin({
            patterns: [
                {from: "public/main", to: "main"},
                {from: "public/img", to: "main/img"},
                {from: "public/robots.txt", to: "robots.txt"}
            ]
        }),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            title: process.env.LOADAX_NAME,
            url: process.env.LOADAX_URL,
            app: process.env.LOADAX_NODE
        }),
        new MiniCssExtractPlugin({
            filename: 'main/css/app.css',
        })
    ],
    devServer: {
        noInfo: true,
        contentBase: './dist',
        historyApiFallback: true,
        onListening: function (server) {
            console.log(`Loadax dev server on localhost: http://localhost:${server.listeningApp.address().port}`);
        }
    },
    resolveLoader: {
        modules: [
            path.join(__dirname, 'node_modules')
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        fallback: { os, fs: false },
        modules: [
            path.join(__dirname, 'node_modules')
        ]
    },
    output: {
        filename: 'main/js/app.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
        publicPath: '/',
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    format: {
                        comments: false,
                    },
                },
                extractComments: false,
            }),
        ]
    }
};