Как в Webpack сделать декомпозицию файлов?

Question

[hatealleverything]

Добрый день, как я могу сделать подобное дерево файлов в Webpack?

Comments

[hatealleverything]

Webpack Dev Config

const path = require("path");

const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const isDev = process.env.NODE_ENV === "development";
const isProd = !isDev;

const optimization = () => {
    const config = {
        splitChunks: {
            chunks: "all",
        },
    };

    return config;
};

const plugins = () => {
    return [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: filename("css"),
        }),
        new CopyWebpackPlugin({
            patterns: [
                {from: path.resolve(__dirname, "public/image"), to: "image"}
            ]
        }),
        new HTMLWebpackPlugin({
            template: "index.html",
            minify: {
                collapseWhitespace: isProd,
            },
        })
    ];
}

const cssLoaders = (additional) => {
    const loaders = [
        {
            loader: MiniCssExtractPlugin.loader,
        },
        "css-loader", "postcss-loader",
    ];

    if (additional) {
        loaders.push(additional);
    }

    return loaders;
};

const babelLoaders = (preset) => {
    const loaders = [
        {
            loader: "babel-loader",
            options: {
                presets: ["@babel/preset-env"],
            },
        },
    ];

    if (preset) {
        loaders[0].options.presets.push(preset);
    }

    return loaders;
};

const filename = (ext) => (isDev ? `[name].${ext}` : `[name].[fullhash].${ext}`);

module.exports = {
    context: path.resolve(__dirname, "public"),
    entry: {
        main: ["@babel/polyfill", path.resolve(__dirname, "src", "index.jsx")],
    },
    output: {
        filename: filename("js"),
        path: path.resolve(__dirname, "build"),
    },
    devServer: {
        historyApiFallback: true,
        port: 4200,
        open: true,
    },
    resolve: {
        extensions: [".js", ".jsx", ".ts", ".less"],
        alias: {
            Source: path.resolve(__dirname, 'src'),
            Public: path.resolve(__dirname, 'public'),
            Image: path.resolve(__dirname, 'public/image'),
            Components: path.resolve(__dirname, 'src/components'),
            Pages: path.resolve(__dirname, 'src/pages'),
            Styles: path.resolve(__dirname, 'src/styles'),
            Utils: path.resolve(__dirname, 'src/utils'),
        },
    },
    optimization: optimization(),
    devtool: isDev ? "source-map" : undefined,
    plugins: plugins(),
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: babelLoaders(),
            },
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: babelLoaders("@babel/preset-typescript"),
            },
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: babelLoaders("@babel/preset-react"),
            },
            {
                test: /\.(ttf|eot|woff|svg)$/,
                use: ["file-loader"],
            },
            {
                test: /\.(png|jpg|svg)$/,
                use: ["file-loader"],
            },
            {
                test: /\.css$/,
                use: cssLoaders(),
            },
            {
                test: /\.less$/,
                use: cssLoaders("less-loader"),
            },
        ],
    },
};