package.json

package.json

{
  "name": "application",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --progress --color --mode production",
    "start": "webpack-dev-server --mode development",
    "watch": "webpack --progress --color --watch --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "core-js": "^3.6.5"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@hotwired/turbo": "^7.0.0-rc.3",
    "@popperjs/core": "^2.9.2",
    "apexcharts": "^3.26.3",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^4.2.2",
    "file-loader": "^6.1.0",
    "html-webpack-plugin": "^4.4.1",
    "lodash": "^4.17.21",
    "mini-css-extract-plugin": "^0.11.0",
    "postcss": "^7.0.32",
    "postcss-loader": "^3.0.0",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^5.52",
    "webpack-cli": "^4.8",
    "webpack-dev-server": "^3.11.0",
    "webpack-manifest-plugin": "^3.1.1"
  }
}

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");


module.exports = {
    mode: 'development',
    entry: {
        shared: './Resources/Private/Scripts/Shared.js',
        finances: {import: './finances.js', dependOn: 'shared'}

    },
    output: {
        filename: '[name].bundle.js',
        publicPath: '',
        path: path.resolve(__dirname, 'Resources/Public/Build/')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                test: /\.s?css$/,
                use: [
                    "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: './'
                        }
                    },
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            plugins: () => [autoprefixer()],
                        },
                    },
                    "sass-loader",
                ],
            },
            {
                test: /\.(eot|ttf|woff|woff2)(\?\S*)?$/,
                loader: "file-loader",
            },

            {
                test: /\.(png|jpe?g|gif|webm|mp4|svg)$/,
                loader: "file-loader",
                options: {
                    name: "[name][contenthash:8].[ext]",
                    outputPath: "assets/img",
                    esModule: false,
                },
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css"
        })
    ],
    resolve: {
        alias: {
            '@styles': path.resolve(__dirname, 'Resources/Private/Styles'),
            '@fonts': path.resolve(__dirname, 'Resources/Private/Fonts'),
            '@svg': path.resolve(__dirname, 'Resources/Public/Svg'),
        },
        extensions: ["*", ".js", ".vue", ".json"],
    },
    optimization: {
        moduleIds: "hashed",
        runtimeChunk: "single",
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    priority: -10,
                    chunks: "all",
                },
            },
        },
    },
    watchOptions: {
        ignored: /node_modules/
    }
};