Как переместить конфигурацию webpack с одного проекта на другой?

Question

Дмитрий Ярощук @chokoroko

Webpack

Как переместить конфигурацию webpack с одного проекта на другой?

Подскажите как переместить конфигурацию webpack(loaders, plugins), с одного проекта на другой ?
Прикрепляю код
Package.json:

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve",
    "build": "webpack",
    "watch": "webpack --watch",
    "build-dev": "webpack --mode development",
    "build-prod": "webpack --mode production",
    "clear": "rd /s /q dist",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "babel-loader": "^9.1.2",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.1",
    "image-webpack-loader": "^8.1.0",
    "mini-css-extract-plugin": "^2.7.5",
    "postcss": "^8.4.23",
    "postcss-loader": "^7.2.4",
    "postcss-preset-env": "^8.3.2",
    "sass": "^1.62.0",
    "sass-loader": "^13.2.2",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.3"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "css-loader": "^6.7.3"
  }
}

Webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PostcssPresetEnv = require("postcss-preset-env");
module.exports = {
    mode: 'production',
    devtool: 'source-map',
    entry: [path.resolve(__dirname,'./src/js/index.js'), path.resolve(__dirname,'./src/styles/index.scss')],
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true,
        filename: "js/[name].js",
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        compress: true,
        port: 3000,
        open: true,
        hot: true,
    },
    module: {
        rules: [
            //_________HTML_________//
            {
                test: /\.html$/i,
                loader: "html-loader"
            },
            //_________CSS, SASS, SCSS_________//
            {
                test: /\.(c|sa|sc)ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: "css-loader" },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [PostcssPresetEnv],
                            },
                        },

                    },
                    { loader: "sass-loader" },
                ],
            },
            //_________ JS _________//
            {
                test: /\.(?:js|mjs|cjs)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', { targets: "defaults" }]
                        ]
                    }
                }
            },
            //_________ FONTS _________//
            {
                test: /\.woff2?$/i,
                type: "asset/resource",
                generator: {
                    filename: 'fonts/[name][ext]',
                }
            },
            //_________ IMAGES _________//
            {
                test: /\.(jpe?g|png|webp|gif|svg)$/i,
                use: [
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                            },
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ],
                type: "asset/resource",
                generator: {
                    filename: 'images/[name][ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({template: path.resolve(__dirname, "./src/index.html")}),
        new MiniCssExtractPlugin({filename: 'styles/style.css'})
    ]
}