webpack.config.js

/* eslint-disable require-jsdoc */
/* eslint-disable func-style */
const defaultsDeep = require('lodash.defaultsdeep');
const path = require('path');
const webpack = require('webpack');

// Plugins
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');

// PostCss
const autoprefixer = require('autoprefixer');
const postcssVars = require('postcss-simple-vars');
const postcssImport = require('postcss-import');

const STATIC_PATH = process.env.STATIC_PATH || '/static';
const NODE_ENV = process.env.NODE_ENV || 'development';
const DIST_BUILD = process.env.NODE_ENV === 'production' || process.env.BUILD_MODE === 'dist';
const ENABLE_PWA = process.env.ENABLE_PWA;
const ENABLE_HTTPS = process.env.ENABLE_HTTPS;

const base = {
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.resolve(__dirname, 'build'),
        host: '0.0.0.0',
        port: process.env.PORT || 8601,
        https: ENABLE_HTTPS,
        proxy: {
            '/extension/': {
                target: 'http://localhost:3000',
                pathRewrite: {'^/extension': ''}
            }
        }
    },
    output: {
        library: 'GUI',
        filename: '[name].js',
        chunkFilename: 'chunks/[name].js'
    },
    resolve: {
        symlinks: false
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            include: [
                path.resolve(__dirname, 'src'),
                /node_modules[\\/]scratch-[^\\/]+[\\/]src/,
                /node_modules[\\/]clipcc-[^\\/]+[\\/]src/,
                /node_modules[\\/]pify/,
                /node_modules[\\/]@vernier[\\/]godirect/
            ],
            options: {
                // Explicitly disable babelrc so we don't catch various config
                // in much lower dependencies.
                babelrc: false,
                plugins: [
                    ['react-intl', {
                        messagesDir: './translations/messages/'
                    }]
                ],
                presets: [
                    ['@babel/preset-env'],
                    '@babel/preset-react'
                ],
                sourceType: 'unambiguous'
            }
        },
        {
            test: /\.css$/,
            use: [{
                loader: DIST_BUILD ? 'style-loader' : MiniCssExtractPlugin.loader
            }, {
                loader: 'css-loader',
                options: {
                    modules: true,
                    importLoaders: 1,
                    localIdentName: '[name]_[local]_[hash:base64:5]',
                    // localIdentName: '[path][name]_[local]',
                    camelCase: true
                }
            }, {
                loader: 'postcss-loader',
                options: {
                    ident: 'postcss',
                    plugins: function () {
                        return [
                            postcssImport,
                            postcssVars,
                            autoprefixer
                        ];
                    }
                }
            }]
        }]
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                minify: TerserPlugin.swcMinify,
                parallel: true,
                include: /\.js$/
            }),
            new CssMinimizerPlugin()
        ]
    },
    plugins: [
        new HardSourceWebpackPlugin(),
        new HardSourceWebpackPlugin.ExcludeModulePlugin([{
            test: /mini-css-extract-plugin[\\/]dist[\\/]loader/
        }])
    ]
};

if (!process.env.CI) {
    base.plugins.push(new webpack.ProgressPlugin());
} else {
    base.stats = 'minimal';
}

function getPlugins () {
    let res = base.plugins.concat([
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"',
            'process.env.DEBUG': Boolean(process.env.DEBUG),
            'process.env.GA_ID': '"' + (process.env.GA_ID || 'UA-000000-01') + '"'
        }),
        new HtmlWebpackPlugin({
            chunks: ['lib.min', 'gui'],
            template: 'src/playground/index.ejs',
            title: 'ClipCC Editor',
            scriptLoading: 'defer',
            enablePWA: ENABLE_PWA,
            sentryConfig: process.env.SENTRY_CONFIG ? '"' + process.env.SENTRY_CONFIG + '"' : null
        }),
        new HtmlWebpackPlugin({
            chunks: ['lib.min', 'blocksonly'],
            template: 'src/playground/index.ejs',
            filename: 'blocks-only.html',
            title: 'ClipCC 3.0 GUI: Blocks Only Example'
        }),
        new HtmlWebpackPlugin({
            chunks: ['lib.min', 'compatibilitytesting'],
            template: 'src/playground/index.ejs',
            filename: 'compatibility-testing.html',
            title: 'ClipCC 3.0 GUI: Compatibility Testing'
        }),
        new HtmlWebpackPlugin({
            chunks: ['lib.min', 'player'],
            template: 'src/playground/index.ejs',
            filename: 'player.html',
            title: 'ClipCC 3.0 GUI: Player Example'
        }),
        new CopyWebpackPlugin({
            patterns: [{
                from: 'static',
                to: 'static',
                globOptions: {
                    ignore: ['sw.js', 'manifest.webmanifest']
                }
            }]
        }),
        new CopyWebpackPlugin({
            patterns: [{
                from: 'node_modules/clipcc-block/media',
                to: 'static/blocks-media'
            }]
        }),
        new CopyWebpackPlugin({
            patterns: [{
                from: 'extensions/**',
                to: 'static',
                context: 'src/examples'
            }]
        }),
        new CopyWebpackPlugin({
            patterns: [{
                from: 'extension-worker.js',
                context: 'node_modules/clipcc-vm/dist/web'
            }]
        })
    ]);
    if (!DIST_BUILD) {
        res = res.concat([
            new MiniCssExtractPlugin({
                filename: '[name].css',
                chunkFilename: 'chunks/[name].chunks.css',
                ignoreOrder: true
            })
        ]);
    }
    if (ENABLE_PWA) {
        res = res.concat([
            new ServiceWorkerWebpackPlugin({
                entry: path.resolve(__dirname, 'static/sw.build.js'),
                publicPath: ''
            }),
            new CopyWebpackPlugin({
                patterns: [{
                    from: 'static/sw.build.js',
                    to: 'sw.js'
                }]
            }),
            new CopyWebpackPlugin({
                patterns: [{
                    from: 'static/manifest.webmanifest',
                    to: 'manifest.webmanifest'
                }]
            })
        ]);
    }
    return res;
}

module.exports = [
    // to run editor examples
    defaultsDeep({}, base, {
        entry: {
            'lib.min': ['react', 'react-dom'],
            'gui': './src/playground/index.jsx',
            'blocksonly': './src/playground/blocks-only.jsx',
            'compatibilitytesting': './src/playground/compatibility-testing.jsx',
            'player': './src/playground/player.jsx'
        },
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: '[name].js'
        },
        module: {
            rules: base.module.rules.concat([
                {
                    test: /\.(svg|png|wav|gif|jpg)$/,
                    loader: 'file-loader',
                    options: {
                        outputPath: 'static/assets/'
                    }
                }
            ])
        },
        optimization: {
            splitChunks: {
                name: 'lib.min',
                chunks: 'all',
                minChunks: 2,
                maxInitialRequests: 5
            },
            runtimeChunk: {
                name: 'lib.min'
            }
        },
        plugins: getPlugins()
    })
].concat(
    DIST_BUILD ? (
        // export as library
        defaultsDeep({}, base, {
            target: 'web',
            entry: {
                'clipcc-gui': './src/index.js'
            },
            output: {
                libraryTarget: 'umd',
                path: path.resolve('dist'),
                publicPath: `${STATIC_PATH}/`
            },
            externals: {
                'react': 'react',
                'react-dom': 'react-dom'
            },
            module: {
                rules: base.module.rules.concat([
                    {
                        test: /\.(svg|png|wav|gif|jpg)$/,
                        loader: 'file-loader',
                        options: {
                            outputPath: 'static/assets/',
                            publicPath: `${STATIC_PATH}/assets/`
                        }
                    }
                ])
            },
            plugins: base.plugins.concat([
                new CopyWebpackPlugin({
                    patterns: [{
                        from: 'node_modules/clipcc-block/media',
                        to: 'static/blocks-media'
                    }]
                }),
                new CopyWebpackPlugin({
                    patterns: [{
                        from: 'extension-worker.{js,js.map}',
                        context: 'node_modules/clipcc-vm/dist/web'
                    }]
                }),
                // Include library JSON files for scratch-desktop to use for downloading
                new CopyWebpackPlugin({
                    patterns: [{
                        from: 'src/lib/libraries/*.json',
                        to: 'libraries',
                        flatten: true
                    }]
                })
            ])
        })) : []
);