webpack.config.js

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin")
const MiniCSSExtractPlugin = require("mini-css-extract-plugin")
const path = require("path")
const OutPutTime = require("./output-time")

let mode = "development",
    source_map = "source-map"

if (process.env.NODE_ENV === "production") {
    mode = "production"
    source_map = "eval"
}

module.exports = {
    mode: mode,
    /**
     * entries for raw js files (source)
     */
    entry: {
        main: path.resolve(__dirname, 'src/main.js'),
        charts: path.resolve(__dirname, 'src/charts.js'),
    },
    /**
     * output folder,
     * where [name] === entry[name]/entry[i] from above
     */
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },

    /**
     * devtools controls if and how source maps are generated.
     */
    devtool: source_map,

    /**
     * https://webpack.js.org/configuration/plugins/
     */
    plugins: [
        new MiniCSSExtractPlugin(),
        new OutPutTime()
    ],

    /**
     * https://webpack.js.org/configuration/module/#rule
     */
    module: {
        rules: [
            {
                test: /\.(sc|c)ss$/i,
                /**
                 * postcss-loader (postcss.config.js),
                 * css-loader and
                 * finally we extract css to
                 * a separate file with MiniCSSExtractPlugin.loader plugin.
                 * Another option, is to use style-loader to inject inline css into
                 * our template files but we don't need that approach.
                 */
                use:[
                    MiniCSSExtractPlugin.loader,
                    "css-loader",
                    /**
                     * postcss-loader (postcss.config.js)
                     */
                    "postcss-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.js$/i,
                exclude: /node_modules/,
                /**
                 * babel-loader (babel.config.js)
                 */
                use: [
                    "babel-loader"
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: "asset"
            },
        ]
    },
    optimization: {
        minimizer: [
            new ImageMinimizerPlugin({
                minimizer: {
                    implementation: ImageMinimizerPlugin.sharpMinify,
                    options: {
                        // Your options for `squoosh`
                    },
                },
            }),
        ],
    },
}