Consider replacing Gulp with Webpack

[jpmckinney]

Gulp is now just building javascripts and stylesheets, and copying images from one directory to another. It also has watch/browser-sync functionality. Webpack is designed for exactly those things.

Here's what ChatGPT came up with, when asked to convert gulpfile.babel.js. It uses different minimizers (Gulp used CSSO), but it's not far from the webpack.config.js file in the data-registry.

Goals are:

• Use the same technologies across projects
• Simplify the build and reduce the number of dependencies (e.g. try to remove plugins from this webpack config)

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

const prod = process.env.NODE_ENV === 'production';

module.exports = {
    mode: prod ? 'production' : 'development',
    entry: {
        app: path.resolve(__dirname, 'frontend/javascripts/application.js'),
    },
    output: {
        path: path.resolve(__dirname, 'ictcg/assets'),
        filename: 'javascripts/[name].js',
        clean: true,
    },
    devtool: prod ? false : 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.scss$/,
                use: [
                    prod ? MiniCssExtractPlugin.loader : 'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    ['autoprefixer', { overrideBrowserslist: ['last 2 versions'] }],
                                ],
                            },
                        },
                    },
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name][ext]',
                },
            },
        ],
    },
    optimization: {
        minimize: prod,
        minimizer: [
            new TerserPlugin(),
            new CssMinimizerPlugin(),
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'stylesheets/[name].css',
        }),
        new BrowserSyncPlugin(
            {
                host: 'localhost',
                port: 3000,
                proxy: 'http://127.0.0.1:8000',
                files: ['**/*.{html,php,svg}', '!node_modules/**'],
            },
            {
                reload: true,
            },
        ),
    ],
    devServer: {
        static: {
            directory: path.join(__dirname, 'ictcg/assets'),
        },
        compress: true,
        port: 9000,
        hot: true,
    },
};

And package.json would contain (snippet):

  "dependencies": {
    "browser-sync": "^2.29.3"
  },
  "devDependencies": {
    "@babel/core": "^7.22.11",
    "@babel/preset-env": "^7.22.10",
    "autoprefixer": "^10.4.14",
    "babel-loader": "^9.1.4",
    "browser-sync-webpack-plugin": "^2.3.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.8.3",
    "css-minimizer-webpack-plugin": "^5.0.2",
    "mini-css-extract-plugin": "^2.7.6",
    "postcss": "^8.4.27",
    "postcss-loader": "^7.3.0",
    "sass": "^1.70.0",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.2",
    "terser-webpack-plugin": "^5.4.2",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }