@cocreate/cocreatejs/webpack.config.js

A collaborative low code headless CMS and Javascript framework for building collaborative no code platforms, apps and UI's. Build powerful applications using HTML5 attributes or Javascript api.

const path = require('path');
const CoCreateConfig = require('./CoCreate.config')
const { ModuleGenerator, FileUploader, SymlinkCreator } = require('@cocreate/webpack')


const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = async (env, argv) => {
    const isProduction = argv.mode === 'production'
    const config = {
        // Path to your entry point. From this file Webpack will begin it's work
        entry: {
            'CoCreate': './src/index.js'
        },

        output: {
            path: path.resolve(__dirname, 'dist'),
            // filename: isProduction ? '[name].min.js' : '[name].js',
            // chunkFilename: isProduction ? '[name].min.js' : '[name].js',
            filename: isProduction ? '[name].js' : '[name].js',
            chunkFilename: isProduction ? '[name].js' : '[name].js',
            libraryTarget: 'umd',
            libraryExport: 'default',
            library: 'CoCreate',
            globalObject: "this",
        },

        experiments: {
            asyncWebAssembly: true,
            topLevelAwait: true,
        },

        plugins: [
            new ModuleGenerator(CoCreateConfig.modules),
            new FileUploader(env, argv),
            new SymlinkCreator(),
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin({
                filename: isProduction ? '[name].min.css' : '[name].css',
                // chunkFilename: isProduction ? '[name].min.css' : '[name].css',
                chunkFilename: (path) => {
                    if (path.name === 'CoCreateCSS')
                        return isProduction ? 'CoCreate.min.css' : 'CoCreate.css';
                    else
                        return isProduction ? '[name].min.css' : '[name].css';
                },
            })
        ],

        // devServer: {
        //     hot: true
        // },

        mode: isProduction ? 'production' : 'development',

        // add source map
        ...(isProduction ? {} : { devtool: 'eval-source-map' }),

        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: (modulePath) => {
                        // Additionally, exclude `CoCreate-ffmpeg.js` file
                        if (/ffmpeg/.test(modulePath)) {
                            return true;
                        }
                        // Include all other .js files
                        return false;
                    },
                    use: [
                        {
                            loader: path.resolve(__dirname, 'node_modules/@cocreate/webpack/src/replace-unicode.js')
                        },
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: ["@babel/plugin-transform-modules-commonjs"],
                                retainLines: true, // Add this option
                            }
                        }
                    ]
                },
                {
                    test: /\.js$/,
                    generator: {
                        filename: '[name].js', // Customize this pattern
                    },
                },
                {
                    test: /.css$/i,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'fonts/'
                            }
                        }
                    ]
                }
            ]
        },

        optimization: {
            minimize: true,
            minimizer: [
                new CssMinimizerPlugin(),
                new TerserPlugin({
                    extractComments: true,
                    parallel: true,
                    terserOptions: {
                        compress: {
                            drop_console: true,
                        },
                    },
                }),
            ],
            splitChunks: {
                chunks: 'all',
                minSize: 1,
                // maxSize: 999999999,
                minChunks: 1,
                maxAsyncRequests: 30,
                maxInitialRequests: 30,
                enforceSizeThreshold: 50000,
                cacheGroups: {
                    defaultVendors: false,
                },
            },
        },

    };

    return config;

}