hochzeit/webpack.config.js

require("dotenv").config();

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// const CopyWebpackPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const webpack = require('webpack');
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const WorkboxPlugin = require('workbox-webpack-plugin');


let mode = (process.env.MODE || "development");

let moduleExports = {

    //Development oder production, wird oben durch Variable angegeben (damit später per IF überprüft)
    mode: mode,

    //Beinhaltet den JS-Startpunkt und SCSS-Startpunkt
    entry: [
        __dirname + "/src/client/js/index.ts",
        __dirname + "/src/client/sass/index.scss"
    ],
    // devtool: 'inline-source-map',

    //Gibt Ausgabename und Ort für JS-File an
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".ts", ".js", ".mjs", ".json", "png"]
    },

    optimization: {
        // minimize: false
        minimizer: [
            new TerserPlugin({
                cache: true,
                parallel: true,
                sourceMap: true, // Must be set to true if using source-maps in production
                terserOptions: {
                    mangle: {
                        reserved: []
                    }
                }
            })
        ]
    },

    plugins: [
        //Delete www before every Build (to only have nessesary files)
        new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: ['**/*', '!**/.gitkeep']}),

        // new WorkboxPlugin.GenerateSW({
        //     maximumFileSizeToCacheInBytes: 1024 * 1024 * 1024 * 5
        // }),

        //Erstellt (kopiert) die Index.html
        new HtmlWebpackPlugin({
            // template: '!!html-loader!src/client/index.html'
            template: 'src/client/index.html'
        }),
        new webpack.DefinePlugin({}),
        new MiniCssExtractPlugin(),
    ],

    module: {

        //Regeln: Wenn Regex zutrifft => führe Loader (in UMGEKEHRTER) Reihenfolge aus
        rules: [
            {
                //Kopiert HTML-Dateien in www. Nur die Dateien, welche im JS angefragt werden
                test: /\.html$/,
                use: [
                    // {
                    //     loader: 'file-loader',
                    //     options: {
                    //         name: '[name].[ext]',
                    //         outputPath: 'html'
                    //     }
                    // },
                    // {
                    //     loader: 'extract-loader'
                    // },
                    {
                        loader: 'html-loader',
                        options: {
                            //Sorgt dafür, dass Child-Views funktionieren
                            attributes: {
                                list: [
                                    // {
                                    //     "attribute": "data-view",
                                    //     "type": "src"
                                    // },
                                    {
                                        "attribute": "src",
                                        "type": "src"
                                    },
                                    {
                                        "attribute": "href",
                                        "tag": "link",
                                        "type": "src"
                                    },
                                ],
                            }
                        }
                    }
                ],
            },
            {
                test: /\.tsx?$/,
                use: ["ts-loader"],
            },
            {
                //Kopiert nur benutzte Bilder/Videos/Sound (benutzt durch JS (import), html oder css/sass)
                test: /(img|video|sound)[\\\/]/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: (resourcePath, resourceQuery) => {
                                // console.log("path", resourcePath);
                                // console.log("query", resourceQuery);
                                return "[name].[ext]"
                            },
                            outputPath: 'img',
                            publicPath: (url, resourcePath, context) => {
                                // console.log("url: ", url);
                                // console.log("resourcePath: ", resourcePath);
                                // console.log("context: ", context);

                                return "/img/" + url;
                            },
                            // useRelativePath: false
                        }
                    },
                ],
            },
            {
                //Compiliert SASS zu CSS und speichert es in Datei
                test: /\.scss$/,
                use: [
                    // {
                    //     loader: 'file-loader',
                    //     options: {
                    //         name: '[name].css',
                    //         outputPath: 'css',
                    //         // publicPath: '/css'
                    //     }
                    // },
                    // {
                    //     loader: 'extract-loader'
                    // },
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        //Compiliert zu CSS
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
};

//Auslagerung von zeitintensiven Sachen in production only, damit Debugging schneller geht
if (mode === "production" && false) {

    //Polyfills hinzufügen
    moduleExports["entry"].unshift("@babel/polyfill");
    // moduleExports["devtool"] = "source-map";

    //Transpilieren zu ES5
    moduleExports["module"]["rules"].push({
        test: /\.m?js$/,
        exclude: /node_modules\/(?!(cordova-sites|js-helper|cs-event-manager|polygon-geometry))/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'],
            }
        }
    });

    moduleExports["module"]["rules"][1]["use"].unshift({
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env'],
            inputSourceMap: "inline",
            sourceMaps: true

        }
    });

    //Hinzufügen von POSTCSS und Autoprefixer für alte css-Präfixe
    moduleExports["module"]["rules"][3]["use"].splice(3, 0, {
        //PostCSS ist nicht wichtig, autoprefixer schon. Fügt Präfixes hinzu (Bsp.: -webkit), wo diese benötigt werden
        loader: 'postcss-loader',
        options: {
            plugins: [require('autoprefixer')()]
        }
    });

    // moduleExports["optimization"] = {
    //     minimize: false,
    //     // minimizer: [new UglifyJsPlugin({
    //     //     include: /\.min\.js$/
    //     // })]
    // }
}

module.exports = moduleExports;